如何使用jquery逐个显示和隐藏每个div [英] how to show and hide each div one by one with jquery

问题描述

我想创建一个flash新闻标题。

但我不知道问题出在哪里！ :(

（因为我在网页设计初学者：D）

所以...

i wanna create a flash news title.
but i don't know where is the the problem! :(
(because im beginner in web designing :D )
so...

我想创建一个显示（fadeIn）一个标题和隐藏（fadeOut）延迟的标题的一部分......以及之后显示下一个标题...（在一个没有停止的循环中）！

i wanna to create a part of title that show(fadeIn) one title and hide(fadeOut) with delay...
and after that show next title... (in a loop without stop)!

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

plz help me to learn how to and create that...:D these are my code that i wrote:

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

推荐答案

你可以试试这个。

这不是专业代码，但应该有效。

It is not so pro code but should work.

这是jsFiddle解决方案：

Here is jsFiddle solution:

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都是。现在它将做一次。而且因为你正在使用一个类选择器，这是一个非常慢的选择器，你不必每次都这样做，赢得性能。你可能不会注意到它但仍然。 ：）

This is declaration of your variables. Important thing is that as you can see I have made my jQuery selection in the beginning and assigned it to variable. Reason for that is because if you going to use this selector in every line of your code and you call $('.news').dosomthing() and then $('.news').dosomethingelse(), jQuery going to search your DOM for those element every time you call it. Now it is going to do it once. And because you are using a class selector this is a very slow selector, and you don't have to do it every time, win on performance. You probably ain't going to notice it but still. :)

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

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

Then we hide all elements and start first rotation.

news.hide();
Rotator();

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

And now the part you probably have more questions about the Rotator() function. Here you can see I kept your original fadeIn and fadeOut code, but I putted it in a function an applied it only to current selected element. What I have added is a jQuery.queue() and that will just add a queue and wait until all effects above will be done and after that execute inside code.

我们只是增加索引（'当前'变量）或者如果它高于所选元素的长度则重新设置为0，并再次为当前索引调用Rotator（）。并且不要忘记最后的.dequeue（）告诉队列可以被删除并继续。

And there we just increase our index('current' variable) or set back to 0 if it is higher then the length of elements selected and call Rotator() again for the current index. And don't forget to .dequeue() at the end to tell that the queue can be removed and continued.

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逐个显示和隐藏每个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！