Question

我有一些需要旋转的文字，这就是我现在所拥有的：

> <div id="facts">
>         <blockquote class="fact visible">
>            xxx  
>         </blockquote>
>         <blockquote class="fact">
>            yyy
>         </blockquote>
>          <blockquote class="fact">
>             zzz
>         </blockquote>
>         <blockquote class="fact">
>            ooo
>         </blockquote>
>     </div>

我的jquery是这样的：

$(document).ready(function() {  

$("div#facts").height(factMaxHeight);

    setTimeout("rotateSlide()",7000);      
});   
.............

$('blockquote.fact').each(function () {
        if($(this).hasClass('visible')) {
            $(this).fadeOut(5000,function () { 
                $(this).removeClass('visible');
                $(this).next().setVis
            });
        }//if
        else {
            $(this).fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        }
    }); 
    setTimeout("rotateSlide()",7000);

所以... xxx显示罚款，但随后它显示出来，我看到所有其他3，yyy，zzz和ooo叠加在一起，它不是一个一个地做，请帮助我弄清楚这一点。

谢谢！

Answer 1

分别更改你的jQuery：

$('blockquote.fact').each(function () {
    if($(this).hasClass('visible')) {
        $(this).fadeOut(5000,function () { 
            $(this).removeClass('visible');
            $(this).next().setVis
        });
        if($(this).next().size()) {
            $(this).next().fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        } else {
            $(this).parent().children().first().fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        }
        return false
    }
});

Answer 2

问题是你要一次遍历所有事实。怎么样这个：

$('blockquote.fact.visible').each(function() {
    $(this).fadeOut(5000, function() {
        $(this).removeClass('visible');

        var next = $(this).next();
        if (next.length == 0)
            next = $('blockquote.fact:first'); // If we're at the end of the list, go back to the first one.

        next.addClass('visible').fadeIn(5000);
    });
});
setTimeout(rotateSlide, 7000);

另外，不要对setTimeout使用可怕的“rotateSlide（）”表示法。只需将您要调用的函数传递给它，如上所示。

JQuery旋转文本

2 个答案: