首页 文章

Jquery .children和.each用法

提问于
浏览 次
0

好的，我已经能够使用以下方法实现此目的：

$('.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>

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

我正在使用此代码：

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

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

这是相应的html：

div class =“photo”img src =“”div class =“caption”span-caption到这里/ span- / div- / div>

jquery

2 回答

  • 0

    What's the problem?

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

    回复于
  • 0

    你可以用

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

    EDIT: 要澄清一下，就像Šime写的一样，删掉 children() 因为图像标签可能不是你想要的 .

    EDIT 2: 已更改，以反映对原始问题的评论中提供的新信息 .

    回复于

相关问题