如何使用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() 函数有更多疑问。 在这里你可以看到我保留了你原来的淡入淡出和淡出代码，但我把它放在一个函数中，只应用到当前选定的元素。我添加的是一个 jQuery.queue() ，它只会添加一个队列并等待上述所有效果完成，然后在代码中执行。

然后我们只是增加我们的索引（'current' 变量），或者如果它高于所选元素的长度，则设置回 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();
    });
}

Answer 2

您为每个 li 设置相同的延迟。

试试

$('.news').each(function(index,i)
{
    $(this).delay(index * 1001).fadeIn('slow').fadeOut('slow');
});

Demo

Answer 3

下面的代码会旋转新闻...

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var divIndex=0;
    function ShowHideDivs(){
      maxval=parseInt($("#maxval").html());
      $("#news"+divIndex).fadeIn('slow').delay(700).fadeOut('slow');
      divIndex=(divIndex+1) % maxval;
    }
    window.setTimeout("ShowHideDivs()",10);
    </script>

    <div id="flashNews">
        <div id="news1" class="news">This is news title 1</div>
        <div id="news2" class="news">This is news title 2</div>
        <div id="news3" class="news">This is news title 3</div>
        <div id="news4" class="news">This is news title 4</div>
        <div id="news5" class="news">This is news title 5</div>
        <div id="news6" class="news">This is news title 6</div>
        <div id="news7" class="news">This is news title 7</div>
        <div style="display:none" id="maxval">7</div>
    </div>