0

我想扩展这个较早的问题，特别是这个答案，它在那里有效，但不适用于我的情况。我想为 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 完全被其内容覆盖，所以动画永远不会被触发。

谢谢！

4

1 回答 1

1

首先，如果您的项目允许，我建议使用最新的 jQuery 版本（即 1.8.3）。

我已经通过使用mouseenter和mouseleave事件实现了正确的大小调整。看看：http ://api.jquery.com/mouseenter/ 它说：

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。

您的代码如下所示：

$(function() {
  $(".thumb").on("mouseenter", 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.on("mouseleave", function() {
      $(this).stop(true).remove();
    });
  });


});
于 2012-12-31T08:04:47.033 回答