Question

我想要与http://jsfiddle.net/8nqkA/2/完全相同的功能（由某人编码）

这样的东西

我不明白我的代码中的错误在哪里。可能有一些非常微不足道的事情，我不知道我在这里是新手：

＆＃ 13;

＆＃13;

no_of_p = $('div#mydiv p').length;
for (i = 0; i < no_of_p; i++) {
    $('div#mydiv p:eq(i)').fadeIn(1000);
    $('div#mydiv p:eq(i)').fadeOut(1000);
};

＆＃13;

#mydiv p {
    position: absolute;
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
    <p>para 1</p>
    <p>para 2 </p>
    <p>para 3</p>
</div>

＆＃13;

Answer 1

您的变量未在字符串中解释。如果要在字符串中添加变量值，则需要字符串连接。就像那样：

$('div#mydiv p:eq('+i+')').fadeIn(1000);
$('div#mydiv p:eq('+i+')').fadeOut(1000);

但是使用像.each这样的jQuery提供的功能会更容易：

$('div#mydiv p').each(function(){
    $(this).fadeIn(1000).fadeOut(1000);
});

答案为什么淡入淡出不起作用

不要使循环淡入淡出，你应该创建一个递归函数，淡化第一个元素，并使用相同的元素集减去第一个元素来调用自身。那段代码就是这样做的：

recursiveFade($('div#mydiv p'));

function recursiveFade($el){
    $el.first().fadeIn(1000).fadeOut(1000, function(){
        recursiveFade($el.slice(1));
    })
}

#mydiv p {
    position: absolute;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
    <p>hi</p>
    <p>how are you </p>
    <p>bye</p>
</div>

Answer 2

在你的代码中，我被认为是String而不是int。因此concat it

no_of_p = $('div#mydiv p').length;
for (i = 0; i < no_of_p; i++) {
    $('div#mydiv p:eq('+i+')').fadeIn(1000);
    $('div#mydiv p:eq('+i+')').fadeOut(1000);
};

Answer 3

在fadeIn中使用callback

var i = 0;

function myFunc() {
    $('div#mydiv p').eq(i).fadeIn(2000 , function() {;
    $('div#mydiv p').fadeOut();
               i++;
             myFunc();
     });

}

 myFunc();

DEMO

Answer 4

您可以使用jQuery.delay（）使它们一个接一个地出现。

试试这个：

no_of_p = $('div#mydiv p').length;
for (i = 0; i < no_of_p; i++) {
    $('div#mydiv p:eq(' + i + ')').delay(i*2000).fadeIn(1000).fadeOut(1000);
};

请在此处查看：jsFiddle

Answer 5

您的源代码下存在一些问题，例如索引i永远不会更改，因为它是选择器字符串的一部分。

但为了使它能够作为您显示的代码片段工作，调用应该是递归的并在回调函数中调用：

＆＃13;

    var i = 0;
    function fadeInOut(index) {
        var elt =$('div#mydiv p').eq(i);
        elt.fadeIn(1000, function(){
            $(this).fadeOut(1000);
            fadeInOut(i++);
        });    
    }

    fadeInOut(i);

＆＃13;

#mydiv p {
    position: absolute;
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
    <p>hi</p>
    <p>how are you </p>
    <p>bye</p>
</div>

＆＃13;

JSFiddle Demo

.fadeIn（）和.fadeOut（）不在for循环中工作

5 个答案: