Question

所以我有一个小小的下拉箭头<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>

Answer 1

您可以将mouseover，mouseleave个事件定义为命名函数;使用.off()的{{1}}，complete函数将.animate()，mouseover个事件重新附加到元素

mouseleave

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

防止.stop（）停止其他动画

1 个答案: