所以我有这个小下拉箭头 <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");
}
});
});
关于javascript - 防止 .stop() 停止其他动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39710814/