jQuery的鼠标悬停和鼠标移开动画错误

我有一个小鼠标悬停和鼠标移开功能，我必须保持的，而不是CSS（）将鼠标移开功能动画（）因其他原因jQuery的鼠标悬停和鼠标移开动画错误

问题出现时，我鼠标悬停时的动画效果，从不透明度1到0仍然像我们用于测试的快速鼠标悬停一样进行。

我也尝试过setTimeOut，以便不透明度在需要的时间后归零。

animate和setTimeOut正在创建相同的问题，在mouserover函数将不透明度更新为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);   
});

来源

2014-04-12 Sagi_Avinash_Varma

我有一个很难理解的问题。你能否在Jsfiddle中重新创建这个问题？ –

我加入的jsfiddle @JosephDailey –

@RobSedgwick其作品以同样的方式其没有阻止生命的戏时，我将鼠标放置 –

你可能要考虑使用任何.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及其数字整数值不是ne编辑包裹在引号中。不透明是一个有效的属性，不需要被解析为一个字符串，并且其接受的值是不需要作为字符串传递的整数。

或者，您可以切换一个CSS类，让CSS转换处理不透明度的变化:)

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

来源

2014-04-12 14:53:43 Terry

您的jsfiddle本身不工作有时候人是越来越模糊，由于动画（）如果妳不体验它，你觉得你是正确的如果在另一台计算机上检查 –

如果是这样的话，当将不透明度更改为1时，应该使用'.animate（）'。更好的建议是简单地打开和关闭一个类，使用CSS转换实现不透明度转换。浏览器的渲染引擎有自己的方式来防止转换队列堆叠起来。 – Terry

jQuery的鼠标悬停和鼠标移开动画错误

回答

相关问题