JQuery показать и скрыть div на мыши (анимация)

Это мой HTML-код:

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>

И я хочу показать .menu при нажатии на #showmenu, скользящем слева направо (с анимацией). При повторном нажатии на #showmenu или в любом месте страницы сайта .menu будет скрываться (слайд назад).

Я использую JQuery 2.0.3

Я пробовал это, но он не делает то, что я хочу.

$(document).ready(function() {
    $('#showmenu').toggle(
        function() {
            $('.menu').slideDown("fast");
        },
        function() {
            $('.menu').slideUp("fast");
        }
    );
});

Ответ 1

Этот метод .toggle() был удален из jQuery в версии 1.9. Вы можете сделать это вместо:

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Демо: http://jsfiddle.net/APA2S/1/

... но как с кодом в вашем вопросе, который будет скользить вверх или вниз. Для перемещения влево или вправо вы можете сделать следующее:

$(document).ready(function() {
    $('#showmenu').click(function() {
         $('.menu').toggle("slide");
    });
});

Демо: http://jsfiddle.net/APA2S/2/

Отмечая, что для этого требуется jQuery-пользовательский слайд-эффект, но вы добавили этот тег к своему вопросу, поэтому я предполагаю, что все в порядке.

Ответ 2

Конечно, slideDown и slideUp не делают то, что вы хотите, вы сказали, что хотите, чтобы это было слева/справа, а не сверху и снизу.

Если ваше изменение на ваш вопрос, добавив тег jquery-ui, означает, что вы используете jQuery UI, я бы пошел с nnnnnn решением, используя jQuery UI slide эффект.

Если нет:

Предполагая, что меню запускается видимым (редактирование: oops, я вижу, что это не допустимое предположение, см. примечание ниже), если вы хотите, чтобы он скользил влево, а затем позже возвращался назад слева, вы может сделать это: Live Example | Live Source

$(document).ready(function() {
    // Hide menu once we know its width
    $('#showmenu').click(function() {
        var $menu = $('.menu');
        if ($menu.is(':visible')) {
            // Slide away
            $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                $menu.hide();
            });
        }
        else {
            // Slide in
            $menu.show().animate({left: 0});
        }
    });
});

Вам нужно будет поместить position: relative в элемент меню.

Обратите внимание, что я заменил тэг toggle на click, потому что эта форма toggle была удалена из jQuery.

Если вы хотите, чтобы меню было скрыто, вы можете отрегулировать выше. Вы хотите знать ширину элемента, в основном, при размещении его вне страницы.

Эта версия не заботится о том, изначально ли изначально видно меню: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
  <script>
    $(document).ready(function() {
        var first = true;

        // Hide menu once we know its width
        $('#showmenu').click(function() {
            var $menu = $('.menu');
            if ($menu.is(':visible')) {
                // Slide away
                $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                    $menu.hide();
                });
            }
            else {
                // Slide in
                $menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
            }
        });
    });
  </script>
</body>
</html>

Ответ 3

Я бы сделал что-то вроде этого

DEMO в JsBin: http://jsbin.com/ofiqur/1/

  <a href="#" id="showmenu">Click Here</a>
  <div class="menu">
    <ul>
      <li><a href="#">Button 1</a></li>
      <li><a href="#">Button 2</a></li>
      <li><a href="#">Button 3</a></li>
    </ul>
  </div>

и в jQuery так же просто, как

var min = "-100px", // remember to set in css the same value
    max = "0px";

$(function() {
  $("#showmenu").click(function() {

    if($(".menu").css("marginLeft") == min) // is it left?
      $(".menu").animate({ marginLeft: max }); // move right
    else
      $(".menu").animate({ marginLeft: min }); // move left

  });
});

Ответ 4

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".click-header").click(function(){
            $(this).next(".hidden-content").slideToggle("slow");
            $(this).toggleClass("expanded-header");
        });
    });
</script>

.demo-container {
    margin:0 auto;
    width: 600px;
    text-align:center;
}
.click-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
    display:none;
    border: 1px solid #d7dbd8;
    padding: 20px;
    text-align: center;
}

<div class="demo-container">
    <div class="click-header">&nbsp;</div>
    <div class="hidden-content">Lorem Ipsum.</div>
</div>

Ответ 5

Попробуйте следующее:

<script type="text/javascript">
$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments),
    _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length]();
        _this.data('func_count', i+1);
    });
}
$('$showmenu').toggleFuncs(
        function() {
           $( ".menu" ).toggle( "drop" );
            },
            function() {
                $( ".menu" ).toggle( "drop" );
            }
); 

</script>

Первая функция fuction является альтернативой устаревшему переключению JQuery:). Хорошо работает с JQuery 2.0.3 и JQuery UI 1.10.3