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

Question

我有一个页面，上面有几张图片。当用户将鼠标悬停在任何一张图像上时，我想要一个 50% 不透明的覆盖 div 淡入，显示有关悬停在其上的图像的信息。这是我刚才在 PHP 中的代码(为了便于阅读，我删除了字符串连接等):

<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 命令在调用时立即覆盖提示的其余部分，那就更好了。B. 当我将鼠标悬停在嵌套在父级内的 H3 标签上时，直接调用 mouseOut，然后是鼠标悬停命令，导致 div 淡出然后立即再次淡入。

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

Answer 1

A:在调用animate之前使用jQuery的.stop()方法，例如:

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

B:尝试在 jQuery ( docs ) 中使用 mouseenter 和 mouseleave 事件。这将解决子元素触发鼠标悬停/鼠标移出的问题。这意味着您必须使用 jQuery 绑定(bind)事件，而不是直接绑定(bind)到 HTML 元素上。