Question

我有一个页面上有几张图片。当用户将鼠标悬停在任何一个图像上时，我希望50％的不透明叠加div可以淡入显示有关正在悬停的图像的信息。这是我刚才在PHP中的代码（我已经删除了字符串concats等以便于阅读）：

<div class="propertyoverlay"
    id="boxnum'.$propertynumber.'"
    onMouseOver="fadein(\'boxnum'.$propertynumber.'\')"
    onMouseOut="fadeout(\'boxnum'.$propertynumber.'\')"
>';
    <h3 class="price">'.$properties[$propertynumber]['price'].'</h3>';
</div>';

将div ID提供给以下命令：

function fadein(id){        
    $('#'+id).animate({ 'opacity': 0.5 });
}

function fadeout(id){        
    $('#'+id).animate({ 'opacity': 0 });
}

我遇到的问题是： A.如果用户反复且快速地在图像上打开和关闭，则淡入淡出命令会叠加。如果mouseOver和mouseOut命令在调用后立即覆盖其余的cue，那就更好了。 B.当我将鼠标悬停在嵌套在父级内部的H3标签上时，会直接调用mouseOut，然后使用鼠标悬停命令，使div淡出，然后立即再次淡入。

我很高兴使用Javascript或JQuery来解决这个问题，但是，如果可能的话，我宁愿暂时避免使用基于CSS3的解决方案。非常感谢你的时间！

Answer 1

在对元素开始新的.animate操作之前，请调用.stop() 用于停止任何仍在进行中的动画。

这样，当fadein操作完成之前调用fadeout函数时，它将从已经达到的不透明度值渐变为0.0不透明度。

Answer 2

答：在调用animate之前使用jQuery .stop（）方法，例如：

$('#'+id).stop(true).animate({ 'opacity': 0 });

B：尝试在jQuery（docs）中使用mouseenter和mouseleave个事件。这将解决触发mouseover / mouseout的子元素的问题。这意味着您必须使用jQuery绑定事件，而不是直接绑定到HTML元素。

Answer 3

我还没有测试过这个，但我认为.stop()就是你所需要的！在official api documention中了解更多相关信息！

javascript动画不透明度更改的行为不正确

3 个答案: