Question

我有一个小鼠标悬停和鼠标输出功能我必须保持mouseout功能animate（）而不是css（）由于其他原因

当鼠标移动时出现问题时，从不透明度1到0的动画仍在进行，就像我们进行测试一样快速鼠标悬停鼠标输出。

我也尝试了setTimeOut，以便在所需时间后将不透明度归零。

animate和setTimeOut都会产生同样的问题，即鼠标悬停功能将不透明度更新为1后，animate和setTimeOut会再次更新为零，因为它们仍在播放。 JSFIDDLE Jquery代码：

$("#dp-ashish").on("mouseover",function(){
    $("#dp-ashish").css("opacity","1");
});
$("#dp-ashish").on("mouseout",function(){
    $("#dp-ashish").animate({"opacity":"0"},1000);          
});

Answer 1

您可能需要考虑使用.stop(true, true)或.finish()（后者仅适用于jQuery v1.9及更高版本）：

$("#dp-ashish").on("mouseover",function(){
    $("#dp-ashish").stop(true,true).animate({opacity:1},1000);
});
$("#dp-ashish").on("mouseout",function(){
    $("#dp-ashish").stop(true,true).animate({opacity:0},1000);          
});

或：

$("#dp-ashish").on("mouseover",function(){
    $("#dp-ashish").finish().animate({opacity:1},1000);
});
$("#dp-ashish").on("mouseout",function(){
    $("#dp-ashish").finish().animate({opacity:0},1000);          
});

p / s：opacity及其数字整数值不需要用引号括起来。 Opacity是一个有效的属性，无需解析为字符串，其接受的值也是整数，也不需要作为字符串传递。

或者，您可以切换CSS类并让CSS过渡处理不透明度变化:)

http://jsfiddle.net/teddyrised/5Ekbf/4/

Jquery mouseover＆amp; mouseout动画bug

1 个答案: