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)。

我已经通过使用mouseentermouseleave事件实现了正确的大小调整。看看: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 回答