动画不起作用后单击JQuery

JQuery click after animate not working

本文关键字：JQuery 单击 不起作用 动画      更新时间：2023-09-26

当我第一次单击#menuIcondiv时，我希望它为#menudiv left: 0em设置动画，然后当我第二次单击它时，为#menu到left: -12em设置动画。

第一部分工作，但当我再次点击时，什么都没有发生。#menuIcon是#menu的孩子，这会影响什么吗？

这是我的JS(根据这个问题改编，微查询插件的答案(：

$(document).ready(function(){
    jQuery.fn.clickToggle = function(a,b) {
        function cb(){
            [b,a][this._tog^=1].call(this);
        }
        return this.on("click", cb);
    };
    $("#menuIcon").clickToggle(function() {   
        $("#menu").animate({left: "0em"}, 500);
    }, function() {
        $("#menu").animate({left: "-12em"}, 500);
    });
});

提前谢谢。

正如John S所建议的，以下是相关的(我认为(html:

<div id="menu">
    <div id="menuIcon">
        <div id="menuIcon1"></div>
        <div id="menuIcon2"></div>
        <div id="menuIcon3"></div>
    </div>
</div>

和css：

#menu {
    width: 16em;
    height: calc(100% - 5em);
    background-color: blue;
    position: fixed;
    bottom: 0;
    left: -12em;
}
#menuIcon {
    height: 4em;
    width: 4em;
    position: relative;
    top: 0;
    left: 12em;
    background-color: green;
}

只需使用添加的类来切换方向可能会更容易：

$("#menuIcon").on("click", function() {  
     $this = $(this)
     if(!$this.hasClass("open"))
     {
         $("#menu").animate({left: "0em"}, 500);
         $this.addClass("open");
     }
     else
     {
        $("#menu").animate({left: "-12em"}, 500);
        $this.removeClass("open");
     }
 })

这并不像你尝试的那样聪明，但我认为它更容易阅读，应该可以在

中工作
$('#menuIcon').toggle(
  function(){
   $("#menu").animate({left: "0em"}, 500);
  } , 
  function(){
   $("#menu").animate({left: "-12em"}, 500);
  }
);

使用Jquery切换函数，它将为您带来神奇的效果。感谢

正如John S所说，我的问题不在于jQuery，而在于HTML的其余部分。

打开时，我有一个带有重叠#菜单的div。我将#menu的z索引设置为2，这就起作用了。

相关文章：