我在以下布局中有 3 个主要的 div 元素。
https://jsfiddle.net/wpztofb7/
<body>
<div id="topBox" class="otherBox">
TEST TOP
</div>
<div id="middleBox" class="middleBox">
SECTION
</div>
<div id="tab" class="tab"><span>New Comment</span></div>
<div id="bottomBox" class="otherBox">
TEST BOTTOM
</div>
</body>
.otherBox {
border: 2px solid #73AD21;
width: 100%;
height: 150px;
}
.middleBox {
border: 2px solid #73AD21;
width: 100%;
height: 25px;
}
.tab {
border-left: 2px solid #73AD21;
border-right: 2px solid #73AD21;
border-bottom: 2px solid #73AD21;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
height: 15px;
width: 120px;
margin-bottom: 20px;
}
$(document).ready(function() {
click = 0;
$("#tab, #middleBox").click(function() {
if (click === 0) {
click = 1;
$("#middleBox").animate({
height: '400px'
}, 500);
} else {
click = 0;
$("#middleBox").animate({
height: '30px'
}, 850);
};
});
if (click === 0) {
//Do wiggle
$("#tab, #middleBox").mouseenter(function() {
$("#middleBox").animate({
height: "40px"
}, 800);
});
$("#middleBox").mouseleave(function() {
$("#middleBox").animate({
height: "30px"
}, 800);
});
}
});
中间的 div 在左下角有一个小标签。希望让中间的 div 在单击自身或选项卡时设置动画。而 mouseenter/mouseleave 需要“摆动”动画来吸引用户注意可扩展的 div 元素。
当Tab MouseOver激活TAB，然后单击激活时，行为会出现问题。然后鼠标位于扩展的中间 div 内，但任何鼠标移动都会折叠该 div。
有人可以指出正确的方向来避免这个问题吗？我是新手，所以要温柔!
我已经在相关元素上尝试了 .off("mouseenter mouseleave") 但无济于事。
理想情况下，用户应该能够通过鼠标进入/离开选项卡或 div 来激活“摆动”。如果在选项卡或 div 中，用户单击，div 应该动画并保持该状态直到再次单击(即使发生 mouseleave)。
最佳答案
我显然过早地问了这个问题。再坚持一点，我就解决了这个问题。
我找到了 .off() 的正确用法
如果有人有更好或更合适的方法来完成相同的任务，请随时发布。或者如果对我的代码有任何批评......
<script>
$(document).ready(function () {
click = 0;
$("#tab, #middleBox").click(function () {
if (click === 0) {
click = 1;
$("#middleBox").animate({ height: '400px' }, 500);
$("#middleBox, #tab").off("mouseenter mouseleave");
}
else {
click = 0;
$("#middleBox").animate({ height: '30px' }, 850);
};
});
if (click === 0) {
//Do wiggle
$("#tab, #middleBox").mouseenter(function () {
$("#middleBox").animate({ height: "40px" }, 800);
});
$("#middleBox").mouseleave(function () {
$("#middleBox").animate({ height: "30px" }, 800);
});
}
}); </script>
关于javascript - 在该元素和其他元素上点击和鼠标输入/鼠标离开时动画元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35800448/