0

div に mouseenter エフェクトを適用しました。div に入ると、別の div がアニメーション化されます。問題は、mouseenter 効果が子 div にも適用されることです。親 div だけに効果を適用し、子 div をアニメーション化するにはどうすればよいですか?

JS:

$(document).ready(function() {
  $('#slideleft').mouseenter(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "0px",
  top: "0px"
             }, 400 );
  });
  $('#slideleft').mouseleave(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "-700px",
  top: "200px"
             }, 400 );
  });

});

HTML

<div id="slideleft" class="slide"> 

  <div class="inner">Animate this element's left style property</div> 
</div> 



    </div>
4

3 に答える 3

2

アニメーションを外側の div にのみ適用するには、イベントのターゲットをチェックして、jQuery メソッドで選択した div と一致することを確認します。 http://docs.jquery.com/Events/jQuery.Event#event.target

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

$(document).ready(function() {
  $('#slideleft').mouseenter(function(event) {  // added 'event' as param name
        if ( this == event.target )             // ADD THIS LINE
        {
            var $lefty = $(this).children();
            $lefty.stop().animate({
                                    left: "0px",
                                    top: "0px"
                                  }, 400 );
        }
  });

  $('#slideleft').mouseleave(function(event) {
      // uncomment the below IF statement, if you only want to hide
      //  the inner div when mousing out of the outer div.
      // Otherwise the code as is will hide your div if you mouse out of either
      //  the outer or the inner div

      //if ( this == event.target )
      //{
        var $lefty = $(this).children();
        $lefty.stop().animate({
                                left: "-700px",
                                top: "200px"
                              }, 400 );
      //}
  });

});

PS: HTML の例には不要な終了 DIV タグが追加されています。

于 2009-12-10T21:45:45.787 に答える
1

それらを使用せず、メイン div でjQuery .hover()関数を使用することで、子供が mouseenter/mouseout イベントを発生させないようにすることができます。

jQuery('#slideleft').hover(
        function() {
                // mouse over function
        },
        function() {
                // mouse leave function
        }
);
于 2009-12-10T20:37:32.907 に答える
0

次のように、子に対して「stopPropagation」を使用します。

$('#slideleft *').mouseenter(function(event) {        <---- note the asterisk selector
 event.stopPropagation();                        <---- this line
});

これにより、mouseenter イベントが各子から親に伝搬されなくなります。そのドキュメントは次のとおりです。

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

PSスタックオーバーフローで礼儀正しくすることは非常に重要です。上記のあなたの回答のいくつかのあいまいな口調を正しく解釈した場合、あなたは将来あなたの言葉をもう少し考えたいと思うかもしれません;-), :-)

于 2009-12-10T21:17:14.517 に答える