2

我有一个页面，上面有几张图片。当用户将鼠标悬停在任何一个图像上时，我希望一个 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 命令在调用后立即覆盖其余的提示，那就更好了。B. 当我将鼠标悬停在嵌套在父级内的 H3 标记上时，直接调用 mouseOut 后跟鼠标悬停命令，导致 div 淡出然后立即再次淡入。

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

4

3 回答 3

1

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

这样，当在淡入操作完成之前调用淡出函数时，它将从已经达到的不透明度值淡出到 0.0 不透明度。

于 2013-01-22T10:10:37.453 回答
1

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

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

B：尝试在 jQuery ( docs )中使用mouseenterandmouseleave事件。这将解决子元素触发 mouseover/mouseout 的问题。这意味着您必须将事件与 jQuery 绑定，而不是直接在 HTML 元素上。

于 2013-01-22T10:12:14.533 回答
0

我还没有测试过这个，但我认为这.stop()是你需要的！在官方 api 文档中了解更多信息！

于 2013-01-22T10:10:43.400 回答