0

動的に作成される 1 ～ 6 個の div があります。また、親 div をスクロールしたときにアニメーション化するこれらの内部にネストされた div があります。今、スクロールするとすべての div がアニメーション化されます。それぞれを引数として送信するにはどうすればよいですか?

これが私のコードのjsfiddleです

<div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move1
    <div class="move">move1XXXXXXXXXXXXX</div>
  </div>
  <div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move2
    <div class="move">move2XXXXXXXXXXXXX</div>
  </div>
  <div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move3
    <div class="move">move3XXXXXXXXXXXXX</div>
  </div>




<script>
 $('.animate').on('mouseover', function () {
   $('.move').animate({
     left: "0px",
   },500 );
 }).on('mouseout', function () {
   $('.move').animate({
     left: "-150px",
   },500 );
 })
</script>
4

2 に答える 2

1

とを使用mouseenterしmouseleaveます。問題は、子要素間を移動するときにmouseoever/mouseoutがトリガーされることです。これは望ましくありません。

http://jsfiddle.net/ExplosionPIlls/qNBEJ/3/

于 2013-03-12T01:29:03.613 に答える
0

呼び出す$('.move')ことにより、ドキュメント内のクラス move を持つすべての要素を検索し、現在ホバーされている要素の子要素のみをアニメーション化する必要があります。また、mouseenterandを使用することをお勧めしmouseleaveます (ドキュメントを参照してください: mouseenterおよびmouseleave )

$('.animate').each(function () {
    var self = $(this),
        move = self.find('.move');
    self.on('mouseenter', function () {
        move.animate({
            left: "0px"
        }, 500);
    }).on('mouseleave', function () {
        move.animate({
            left: "-150px"
        }, 500);
    });
});
于 2013-03-12T01:35:27.787 に答える