使用jQuery淡入/淡出文本和循环

时间:2014-08-11 00:26:50

标签: jquery loops fadein fadeout

我正在尝试Jquery淡出文本,然后淡入,然后再循环这个全面。 循环部分不起作用。想知道什么是错的?!?!

以下是代码:

JQUERY

<script>
    $("document").ready(function() {
        (function runIt() {
            $('#original').fadeOut('slow', function() {
                $('#original').fadeIn('slow').html('second');

                $(this).find('#original').html('first');

                runIt();

            });
        }());
    });
</script>

BODY

<p>
  <span id='original'>first</span>
</p>

2 个答案:

答案 0 :(得分:1)

问题在于您正在尝试将html更改为&#34;首先&#34;在&#34;第二&#34;之前淡出完成。要运行淡入/淡出循环,您需要完全淡化和淡出每张幻灯片。 使用此示例,使用它,您将能够在循环中添加更多场景。

$("document").ready(function() {
    var texts = ["first", "second"];
    var i = 0;
    (function runIt() {
        i++;
        $('#original').fadeOut('slow', function() {
            $('#original').html(texts[i % texts.length]);
            $('#original').fadeIn('slow', function() {
                runIt()
            });
        });
    }());
});

您可以测试it here

答案 1 :(得分:0)

在我第二次看到它之前,我似乎并不理解这个问题。据我所知,你试图在第一和第二之间循环?这会做到这一点,但它 因为我不熟悉Javascript:X

,所以并不漂亮

更新了FIDDLE

(function runIt() {
        $('#original').fadeOut('slow', function(){
            $('#original').fadeIn('slow').html('second');
            $('#original').fadeOut('slow', function(){
                $('#original').fadeIn('slow').html('first');
    runIt();
            });
        });
    }());