我想要的是一种鼠标轨迹效果,当你将鼠标悬停在 div 上或向下时。但是,如果您将鼠标悬停过快几次然后停止,效果就会自行重复。
我该如何解决这个问题?我想我需要某种出队的东西,比如动画选项,但对于 fadeTo 功能。有任何想法吗?
$(".test").mouseover(function(e) {
$(this).fadeTo(200, 1);
}).mouseout(function(e) {
$(this).fadeTo(200, 0.3);
});
.test {
padding: 5px;
width: 200px;
color: #ffffff;
font-weight: bold;
background: #000000;
opacity: 0.3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
您可以使用.stop
停止以前的动画的方法。如果你通过true
作为一个参数,它还将清除排队的动画。
如果我正确理解了您要寻找的内容,那么您想要的就是这个(您说您想要一个“鼠标轨迹”,我认为这意味着您不希望之前的动画一旦停止就停止鼠标离开该元素,因此只有一个调用.stop
):
$(".test").mouseover(function(e){
$(this).stop(true).fadeTo(200,1);
}).mouseout(function(e){
$(this).fadeTo(200,0.3);
});
你可以看到正在运行here.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)