![](/img/trans.png)
[英]React stop/start fade-out on mouseEnter and mouseLeave without Jquery
[英]Fade in/out on mouseenter/mouseleave, stop queue
这是我用来使某些图像在悬停时更改其src的代码段。
$(".social").on({
mouseenter: function () {
$(this).data("original-src", $(this).attr("src"))
.fadeOut(250, function () {
$(this).attr("src", $(this).attr("data-src"));
}).fadeIn(250);
},
mouseleave: function () {
$(this).fadeOut(250, function () {
$(this).attr("src", $(this).data("original-src"));
}).fadeIn(250);
}
});
出现一个问题,当您多次将鼠标移过时,动画将重复并且队列变得疯狂。.观看此视频:http: //youtu.be/dTYhbcQM3tI如何避免这种情况? 我尝试使用.stop()
但似乎无法正常工作。
这是基本的JSFIDDLE: http : //jsfiddle.net/HpmN7/925/
使用stop(true, true)
(清除队列?true,跳转到末尾?true)
$(".social").on({
mouseenter: function () {
$(this).data("original-src", $(this).attr("src"))
.stop(true, true).fadeOut(250, function () {
$(this).attr("src", $(this).attr("data-src"));
}).fadeIn(250);
},
mouseleave: function () {
$(this).stop(true, true).fadeOut(250, function () {
$(this).attr("src", $(this).data("original-src"));
}).fadeIn(250);
}
});
您可以在鼠标进入后立即清除动画队列,然后再次创建动画。 很像这样:
$(".social").on({
mouseenter: function () {
$(this).finish();
$(this).data("original-src", $(this).attr("src"))
.fadeOut(250, function () {
$(this).attr("src", $(this).attr("data-src"));
}).fadeIn(250);
},
mouseleave: function () {
$(this).fadeOut(250, function () {
$(this).attr("src", $(this).data("original-src"));
}).fadeIn(250);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.