防止.stop()停止其他动画

所以我有这个小下拉箭头<div>，我想在点击时向上移动，这是有效的。但是在它上面有另一个动画，它改变了它的不透明度，并使用了jQuery函数.stop()。问题是，每当我在滑动动画期间将鼠标悬停在它上面时，元素就会停止运行，并没有完成动画。

如何解决这个问题?

PS:如果有人对如何切换点击两个功能有任何建议，我很乐意听到他们，一个悬停似乎更方便。为这个添加一个属性有点蹩脚。

编辑:可用示例:http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview

$(document).ready(function () {
    console.log("ready for action!");

    // Dropdown icon hover
    $("#dropdownIcon").hover(function () {
        $(this).stop(true).fadeTo(500, 1);
        console.log("hovering");
    }, function () {
        $(this).stop(true).fadeTo(500, 0.3);
        console.log("no longer hovering");
    });

    // Clicking on dropdown icon
    $("#dropdownIcon").on("click", function () {
        $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
        console.log("i clicked on the thing!");
        if ($(this).attr("data-click-state") == 1) {
            $(this).attr("data-click-state", 0);
            $(this).animate({bottom:"0"},1000);
            console.log("clicked once");
        } else {
            $(this).attr("data-click-state", 1);
            $(this).animate({bottom:"50%"},1000);
            console.log("clicked again");
        }
    });
});

HTML

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="CSS/normalize.css" />
    <link type="text/css" rel="stylesheet" href="CSS/main.css" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <title>Rmonik</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>
                RMONIK
            </h1>
            <div id="dropdownIcon" data-click-state="0">
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
        </header>
        <nav></nav>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="Javascript/main.js"></script>
</body>
</html>

可以将mouseover、mouseleave事件定义为命名函数;使用.animate()的.off(), complete函数将mouseover, mouseleave事件重新附加到元素

$(document).ready(function() {
  console.log("ready for action!");
  // Dropdown icon hover
  function handleMouseOver() {
    $(this).fadeTo(500, 1);
  }
  function handleMouseLeave() {
    $(this).fadeTo(500, 0.3)
  }
  function handleAnimationComplete() {
    $(this).on("mouseover", handleMouseOver)
      .on("mouseleave", handleMouseLeave)
  }
  $("#dropdownIcon").on("mouseover", handleMouseOver)
    .on("mouseleave", handleMouseLeave);

  // Clicking on dropdown icon
  $("#dropdownIcon").on("click", function() {
    $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
    console.log("i clicked on the thing!");
    if ($(this).attr("data-click-state") == 1) {
      $(this).attr("data-click-state", 0);
      $(this).off("mouseover mouseleave")
        .animate({
          bottom: "0"
        }, 1000, handleAnimationComplete);
      console.log("clicked once");
    } else {
      $(this).attr("data-click-state", 1);
      $(this).off("mouseover mouseleave")
        .animate({
          bottom: "-200px"
        }, 1000, handleAnimationComplete);
      console.log("clicked again");
    }
  });
});

plnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview

相关内容

最新更新

热门标签：