javascript - 制作一个可以使用 top 属性进行动画切换的菜单

Question

我正在尝试制作一个切换按钮，所以当您在 #mbtn 上单击一次时，它必须设置为 top:0px 并且当您单击第二个时时间，它必须设置为 top:-110px。

这是我正在使用的代码，但它似乎无法正常工作，我哪里错了？

<script>
$(document).ready(function() {
    $('#mbtn').toggle(
        function() {
            $('.menu').animate({
              top: "0px"
            }, 500);
        },
        function() {
            $('.menu').animate({
                top: "-110px"
            }, 500);
        }
    );
});
</script>

Answer 1

根据 jQuery API，您必须将 toggle 与操作一起使用，例如 click。例如:

$( "#mbtn" ).click(function() { 
  $( ".menu" ).toggle( "slow", function() {
    // Animation complete.
  });
});

JSfiddle

我猜你想隐藏菜单栏？如果是这样，请改为查看 .slideToggle()。这是 JSfiddle example .