我想扩展这个较早的问题,特别是这个答案,它在那里有效,但不适用于我的情况。我想为 div 设置动画并让它与周围的 div 重叠(而不是取代它们),并且 <不同>div 将具有结构化内容</不同>。
根据我的情况调整的上一个答案的代码是:
<style>
.thumb { width:100px; height:100px; background-color:red; margin:1em; }
</style>
<body>
<div style="width:270px">
<div class="thumb">
<h2>1.2</h2>
</div>
<div class="thumb">
<h2>2.2</h2>
</div>
</div>
</body>
$(function() {
$(".thumb").bind("mouseover", function() {
var n = $(this).clone();
var of = $(this).offset();
n.css({position:'absolute', top: of.top, left: of.left, margin: 0})
.appendTo("body")
.animate({
width:200,
height:200
});
n.bind("mouseout", function() {
$(this).stop(true).remove();
});
});
});
并且可以在http://jsbin.com/ukinig/1/edit进行测试
问题:当鼠标悬停在 div.thumb 上时,它的动画效果很好,但如果指针悬停在子 h2 上,据我了解,事件再次触发,再次传播到父 div.thumb 并导致动画重复。移入和移出 h2 会导致动画重复。
我尝试阻止事件从 div.thumb 的任何子级传播: $('.thumb').find('*').bind('mouseover',function(){ return false; });
但在我的情况下不起作用,因为周围的 div 完全被其内容覆盖,所以动画永远不会被触发。
谢谢!