Question

嗨我有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);
  });
});

Answer 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 );
    });
 });

Answer 2

只需使用this作为事件处理程序中的选择器：

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

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

Answer 3

使用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。

Answer 4

使用此

$(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 );
   });
});

Answer 5

用$（this）替换$（'。HomeClaimWrapper .img'）

Answer 6

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

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

顺便说一下，这是当前的单参数定义，所以我认为你的（以及其他答案）样本不会做你想要的。它会在鼠标进入和离开时触发。

如果您希望它们分开，则有两个参数版本的悬停。

Jquery使用它来仅为所选项目设置动画

6 个答案: