代码之家 › 专栏 › 技术社区 › Mohsen Rasouli

如何使用jquery逐个显示和隐藏每个div

fadeout fadein each delay jquery

Mohsen Rasouli · 技术社区 · 12 年前

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

我想创建标题的一部分,显示(fadeIn)一个标题并延迟隐藏(fadeOut)。。。
在那场演出之后的下一个标题。。。(不停地循环)!

plz帮助我学习如何创建…: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>

3 回复 | 直到 12 年前

migontech 12 年前

你可以试试这个。

它不是那么亲代码,但应该可以工作。

以下是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').dosomething(),再调用$('.news').dosomethingelse(),那么jQuery每次调用它时都会在DOM中搜索这些元素。现在它只会做一次。因为您使用的是类选择器,所以这是一个非常慢的选择器,而且您不必每次都这样做,以性能取胜。你可能不会注意到,但仍然会注意到

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

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

news.hide();
Rotator();

现在,您可能对Rotator()函数有更多的问题。在这里,你可以看到我保留了你原来的fadeIn和fadeOut代码,但我把它放在了一个函数中,并只将它应用于当前选择的元素。我添加的是一个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();
    });
}

Dipesh Parmar 12 年前

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

尝试

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

Demo

Prateek Shukla 12 年前

下面的代码将轮换新闻。。。

<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>