jquery - 如何用jquery一一显示和隐藏每个div

Question

我想创建一个快讯标题。
但我不知道问题出在哪里! :(
(因为我是网页设计的初学者:D)
所以...

我想创建标题的一部分，显示(淡入)一个标题并延迟隐藏(淡出)...
然后显示下一个标题...(不间断循环)!

请帮助我学习如何创建......:D 这些是我写的代码:

<div id="flashNews">
    <div class="news">This is news title 1</div>
    <div class="news">This is news title 2</div>
    <div class="news">This is news title 3</div>
    <div class="news">This is news title 4</div>
    <div class="news">This is news title 5</div>
    <div class="news">This is news title 6</div>
    <div class="news">This is news title 7</div>
</div>

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.news').each(function(index) {
            $(this).fadeIn('slow').delay(700).fadeOut('slow');
        });

    });
</script>

Answer 1

你可以试试这个。

这不是那么专业的代码，但应该可以工作。

这是 jsFiddle 解决方案:

http://jsfiddle.net/migontech/sfUU6/

var news = $('.news')
current = 0;
news.hide();
Rotator();
function Rotator() {
    $(news[current]).fadeIn('slow').delay(500).fadeOut('slow');
    $(news[current]).queue(function() {
        current = current < news.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}

编辑

这是变量的声明。 重要的是，正如您所看到的，我在一开始就进行了 jQuery 选择并将其分配给变量。原因是因为如果您要在代码的每一行中使用此选择器，并且调用 $('.news').dosomthing() 然后调用 $('.news').dosomethingelse()，jQuery 将搜索每次调用这些元素时您的 DOM。现在它要做一次。而且因为您使用的是类选择器，所以这是一个非常慢的选择器，您不必每次都这样做，以性能取胜。你可能不会注意到它，但仍然如此。 :)

var news = $('.news')
current = 0;

然后我们隐藏所有元素并开始第一次旋转。

news.hide();
Rotator();

现在您可能对 Rotator() 函数有更多疑问。 在这里您可以看到我保留了原始的 fadeIn 和 fadeOut 代码，但我将其放入一个函数中，仅将其应用于当前选定的元素。我添加的是 jQuery.queue() ，它只会添加一个队列并等待上面的所有效果完成，然后执行内部代码。

我们只需增加索引(“当前”变量)，或者如果索引高于所选元素的长度，则将其设置回 0，并为当前索引再次调用 Rotator()。并且不要忘记最后的 .dequeue() 来告诉队列可以被删除并继续。

function Rotator() {
    $(news[current]).fadeIn('slow').delay(500).fadeOut('slow');
    $(news[current]).queue(function() {
        current = current < news.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}