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

我个人喜欢将我的状态定义保存在一个地方，而较新版本的 jQuery 使悬停事件变得容易：

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

顺便说一下，这是当前的单参数定义，所以我认为您的（以及此处的其他答案）示例不会完全符合您的要求。它会在鼠标进入和离开时触发。

如果你想让它们分开，悬停有两个参数版本。

于 2012-08-31T06:00:37.967 回答
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

用这个

$(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

用 $(this) 替换 $('.HomeClaimWrapper .img')

于 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 回答