Question

我想扩展this之前的问题，特别是this在那里有效的答案，但不是我的情况。我想为div设置动画并让它与周围的div重叠（不替换它们）和＆lt;不同＆gt; div将具有结构化内容＆lt; / different＆gt ;.

根据我的情况调整的上一个答案的代码是：

<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完全被其内容覆盖，因此动画永远不会被触发。

谢谢！

Answer 1

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

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

mouseenter事件与鼠标悬停事件的处理方式不同事件冒泡。如果在这个例子中使用鼠标悬停，那么当鼠标指针移动到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();
    });
  });


});

先前＆＃34; jQuery div对周围元素的动画变化＆＃34;

1 个答案: