Question

好的，我已经能够使用以下方法解决这个问题：

$('.jcaption').hover(function() { $('.caption', this).stop(false, true).animate({bottom:0},{duration:250, easing: style}); $('.jcaption').hover(function() { $('.caption', this).stop(false, true).animate({bottom:-100},{duration:250, easing: style}); })

使用以下html：

div class =“photo”img src =“”div class =“caption”span-caption在这里/ span- / div- / div＆gt;

我现在遇到的问题是我必须为每个图像标题遵循相同的HTML结构。有没有办法巩固这个，我可以在div类照片下列出几个图像，而不必单独列出每个？

我正在使用此代码：

$('.photo').hover(function() {
    $(this).children()
        .stop(false,true)
        .animate({bottom:-50},{duration:200, easing: style});

为图像标题设置动画，并希望将效果应用于具有类.photo的每个图像。正如当前代码所示，它仅将效果应用于第一个.photo类，如果在此类中添加了更多图像标题，则它只会在第一个上重叠。

这是相应的html：

div class =“photo” img src =“”div class =“caption”span-caption在这里/ span- / div- / div＆gt;

Answer 1

您可以使用

$('.photo > img').each(function(index, element) {
    $(element).hover(function() {
        $(this).stop(false,true).animate({bottom:-50},{duration:200, easing: style});
    });
});

，但是除非你想特别处理一些返回的元素，否则不需要使用每个选择器：

$('.photo > img').hover(function() {
    $(this).stop(false,true).animate({bottom:-50},{duration:200, easing: style});
});

编辑：要澄清一下，就像Šime所写，请删除children()，因为图片代码不能拥有它们，而且可能不是您想要的。

编辑2：已更改，以反映对原始问题的评论中提供的新信息。

Answer 2

What's the problem?

当您将鼠标悬停在图像上时，所有图像都会生成动画。

Jquery .children和.each用法

2 个答案: