个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 06:02:10 25 4
gpt4 key购买 nike

所以我有这个小下拉箭头 <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事件定义为命名函数；使用.off()、.animate()的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

关于javascript - 防止 .stop() 停止其他动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39710814/

25 4 0
文章推荐： javascript - 如何在 Angular 中掌握这个条件 promise ？
文章推荐： amazon-web-services - Terraform:将 AWS 托管策略附加到角色的正确方法？
文章推荐： nltk - python33如何使用nltk3？
文章推荐： javascript - 将 javascript 中的数组数组传递给字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com