Question

我有这个jquery代码：

$(".button-banc").hover(function() {
    $(".button-banc img")
        .animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
        .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
        .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});

我想要的效果是：当你将鼠标移到图像上时，这个图像应该跳了一下。问题是我使用“button-banc”类获得了“一些”图像，我希望这样做：

当鼠标移过时，“只有实际图像”应该跳转。问题是，通过我发布的代码，每个图像都会跳转。

我怎样才能做到这一点，请帮忙;我想制作一个通用的方法，这样如果我用类添加图像，它们也会表现得那样。感谢。

Answer 1

将函数顶部更改为使用this，如下所示：

$(".button-banc img").hover(function() {
   $(this).animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
          .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
          .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});

此选择器将图像悬停在与该类相同的容器中，并仅为那个图像设置动画，因为您悬停的图像是上面代码中this的内容

Answer 2

$(".button-banc").hover(function() {
    $(this).find("img")
        .animate({ top: "-21px" }, 200).animate({ top: "-17px" }, 200) // first jump
        .animate({ top: "-19px" }, 100).animate({ top: "-17px" }, 100) // second jump
        .animate({ top: "-18px" }, 100).animate({ top: "-17px" }, 100); // the last jump
});

帮助过滤孩子

2 个答案: