Jquery在类上制作动画

Posted 2023-05-09

【中文标题】Jquery在类上制作动画

【英文标题】：Jquery animate on a class

【发布时间】：2011-07-16 22:10:47

【问题描述】：

大家好，我是 JQuery 的新手，我有一个关于为某个班级的孩子制作动画的问题。

我有以下几点：

    <div class="block"><img src="a.jpg" class="top"><img src="b.jpg"></div>
    <div class="block"><img src="c.jpg" class="top"><img src="d.jpg"></div>

我用 (this) 调用 div，我想选择具有“top”类的图像进行动画处理。

我试过了

$(this, 'img.top').animate(
            opacity:0
        ,400);
    )

但它不起作用。 有谁知道执行此选择的正确语法？谢谢

【问题讨论】：

对不起，我的问题不清楚。这是被鼠标悬停的 div。

【参考方案1】：

你需要写$('img.top', this); context 参数是第二个。

相当于$(this).find('img.top')。

【讨论】：

谢谢！这很好用。我需要等待 7 分钟才能接受您的回答。只是出于好奇，当$(parent child) 似乎相反时，为什么要按这个顺序写？

@Luke：因为第二个参数是可选的。不过，你是对的；这是违反直觉的。

=/ 我怎么知道要使用哪一个？

@Luke：我不确定你在问什么。

我最初认为 (this) 是 img 的父级。为什么用父子选择器找不到呢？

【参考方案2】：

$('img.top').hover(function()$(this).animate(
            opacity:0
        ,400););

试试看^^^^^^^ :-)

还要确保它在 dom 存在时运行或将其包装：

$(function()/*jquery stuff*/);

【讨论】：

感谢您查看我的答案=)。我在单独的 div 中有几张带有“top”类的图像。我只想在 div 鼠标悬停时为图像设置动画。

$(function()/*jquery stuff*/);:P

【参考方案3】：

如果您想确保在 div class="block" 内的图像 class="top" 上制作动画，您可以这样做：

$('.block').children('img.top').animate(opacity:0,400);

显然，如果你在一个使用类块在 div 上运行的函数内部，你可以更改为：

$(this).children('.top').animate(opacity:0,400);

查看demo here 将鼠标悬停在 div 上将使用 $(this) 来执行动画...