0

私はこの以前の質問、特にそこでは機能するが私の場合は機能しないこの回答を拡張したいと思います。divをアニメーション化して、周囲のdivとオーバーラップさせたい（それらを置き換えない）と、<different>divには構造化されたコンテンツがあります</different>。

私の場合に合わせて調整された前の回答のコードは次のとおりです。

<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とは異なります。この例でマウスオーバーが使用された場合、マウスポインターが内部要素上に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。

コードは次のようになります。

$(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 に答える