Jquery在类上制作动画答案

【问题标题】：Jquery animate on a classJquery在类上制作动画
【发布时间】：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。

标签： jquery class jquery-selectors

【解决方案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) 来执行动画...

【讨论】：