how to show and hide each div one by one with jquery

问题

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

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

回答1:

You can try this.

It is not so pro code but should work.

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();
    });
}

Edit

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();

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.

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();
    });
}

回答2:

You are setting same delay for each li.

Try

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

Demo

回答3:

The below code will rotate the news...

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

来源：https://stackoverflow.com/questions/15609139/how-to-show-and-hide-each-div-one-by-one-with-jquery

标签

jquery

delay

each

fadein

fadeout