0

こんにちは私は同じブロックを3回繰り返していますが、ホバーされたブロックをアニメーション化したいのですが、他のブロックはアニメーション化しません。以下のスクリプトは、すべてのブロックをアニメーション化します。jquery "this"を使用して、ホバーされたdivをアニメーション化するにはどうすればよいですか？また、.imgクラスもあります。

$(document).ready(function () {
  $(".HomeClaimWrapper").hover(function () {
    $(".HomeClaimWrapper .img").stop().animate({
      top: "-10px"
    }, 300);
  });

  $(".HomeClaimWrapper").mouseout(function () {
    $(".HomeClaimWrapper .img").stop().animate({
      top: "-5px"
    }, 300);
  });
});
4

6 に答える 6

1

あなたはこのようなこのバインドイベントのようにそれを行うことができます 

 $(document).ready(function(){
    $.each($(".HomeClaimWrapper .img").hover(function(){
       $(this).stop().animate({
       top: "-10px"
       }, 300 );
    });

    $.each($(".HomeClaimWrapper .img").mouseout(function(){
       $(this).stop().animate({
       top: "-5px"
       }, 300 );
    });
 });
于 2012-08-31T05:45:02.487 に答える
0

これを使って

$(document).ready(function(){
   $(".HomeClaimWrapper .img").hover(function(){
     $(this).stop().animate({
       top: "-10px"
     }, 300 );
   });

   $(".HomeClaimWrapper .img").mouseout(function(){
      $(this).stop().animate({
        top: "-5px"
      }, 300 );
   });
});

編集：imgのホバーでアニメーション化するdiv

$(document).ready(function(){
   $(".HomeClaimWrapper").hover(function(){
     $(this).find(".img").stop().animate({
       top: "-10px"
     }, 300 );
   });

   $(".HomeClaimWrapper").mouseout(function(){
      $(this).find(".img").stop().animate({
        top: "-5px"
      }, 300 );
   });
});
于 2012-08-31T05:45:23.953 に答える
0

$（'。HomeClaimWrapper.img'）を$（this）に置き換えます

于 2012-08-31T05:45:41.833 に答える
0

thisイベントハンドラー内のセレクターとして使用するだけです。

$(function(){
    $(".HomeClaimWrapper .img").hover(function(){
        $(this).stop().animate({
            top: "-10px"
        }, 300 );
    });

    $(".HomeClaimWrapper .img").mouseout(function(){
        $(this).stop().animate({
        top: "-5px"
        }, 300 );
    });
});
于 2012-08-31T05:44:49.743 に答える
0

使用するにはthis：

$(document).ready(function(){
  $(".HomeClaimWrapper .img").hover(function(){
     $(this).stop().animate({
         top: "-10px"
         }, 300 );
     });

  $(".HomeClaimWrapper .img").mouseout(function(){
      $(this).stop().animate({
         top: "-5px"
         }, 300 );
  });
});

にご注意ください.img。class="img"コードのどこかに表示されない場合は、削除.してそのままにしておきimgます。

于 2012-08-31T05:45:04.547 に答える
0

私は個人的に状態定義を1つの場所に保持するのが好きで、新しいバージョンのjQueryを使用すると、ホバーイベントを簡単に実行できます。

$(function(){
    $(".HomeClaimWrapper .img").hover(function(e){
        $(this).stop().animate({
            top: e.type == 'mouseenter' ? "-10px" : "-5px"
        }, 300 );
    });
});

ちなみに、これが現在の単一パラメーターの定義なので、あなたの（そしてここにある他の答えの）サンプルはあなたが望むことを完全には行わないと思います。マウスのEnterとLeaveの両方でトリガーされます。

それらを分離したい場合は、ホバーの2つのパラメーターバージョンがあります。

于 2012-08-31T06:00:37.967 に答える