Question

这是我的代码：

 var faderIndex = 0,
        faders = $('.fadey,fadey2,fadey3');

    function nextFade() {
        $(faders[faderIndex]).fadeOut(1000, function() {
            faderIndex++;
            if (faderIndex >= faders.length)
                faderIndex = 0;
            $(faders[faderIndex]).fadeIn(1000, nextFade);
        });
    }
    nextFade();

html代码：

<div>
    <div class='fadey'>1</div>
    <div class='fadey'>2</div>
    <div class='fadey'>3</div>
</div>

<div>
    <div class='fadey2'>hello1</div>
    <div class='fadey2'>hello2</div>
    <div class='fadey2'>hello3</div>
</div>

<div>
    <div class='fadey3'>hello1111</div>
    <div class='fadey3'>hello2222</div>
    <div class='fadey3'>hello33333</div>
</div>

css：

div.fadey,div.fadey2,div.fadey3 {
    display: none;
}

我已经尝试了但是它不起作用请帮帮我？

Answer 1

怎么样？

[class*="fadey"] 要将所有具有字符串'fadey'的元素作为类名的一部分，所以当你添加更多的推子（fadey4，fadey5等）时你不需要更新css和jQuery代码？

Answer 2

在班级选择器中遗漏.

var faderIndex = 0,
faders = $('.fadey,.fadey2,.fadey3');
//-----------------^.......^.......   
function nextFade() {
    $(faders[faderIndex]).fadeOut(1000, function() {
        faderIndex++;
        if (faderIndex >= faders.length)
            faderIndex = 0;
        $(faders[faderIndex]).fadeIn(1000, nextFade);
    });
}
nextFade();

你可以改变这个

faders = $('.fadey,.fadey2,.fadey3');

到

faders = $('[class^=fadey]');

Fiddle Demo

如何在其他div上应用相同的效果（淡入/淡出）？

2 个答案: