jquery - Alternate content of a div every 3 seconds with javascript - Stack Overflow

admin管理员组

文章数量:1289828

I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. Jquery prefered, or pure js fine too.

Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat?

HTML:

<div class="wrapper" style="height:100px">
  <div id="quote1">I am a quote</div>
  <div id="quote2">I am another quote</div>
  <div id="quote3">I am yet another quote</div>
</div>

Javascript: (as per Arun in the ments)

jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            $els.eq(++i % len).fadeIn();
        })
    }, 2500)
})

I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. Jquery prefered, or pure js fine too.

Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat?

HTML:

<div class="wrapper" style="height:100px">
  <div id="quote1">I am a quote</div>
  <div id="quote2">I am another quote</div>
  <div id="quote3">I am yet another quote</div>
</div>

Javascript: (as per Arun in the ments)

jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            $els.eq(++i % len).fadeIn();
        })
    }, 2500)
})

• javascript
• jquery

Share Improve this question Follow edited May 11, 2014 at 21:29 Shawn Taylor asked May 11, 2014 at 3:22 Shawn TaylorShawn Taylor 15.8k44 gold badges3434 silver badges3939 bronze badges 6

• 2 Have you tried anything yet? – Meredith Commented May 11, 2014 at 3:23
• 2 see jsfiddle/arunpjohny/asTBL/1 – Arun P Johny Commented May 11, 2014 at 3:31
• Have any of our answers worked for you? – AstroCB Commented May 11, 2014 at 15:35
• I really like @Arun P Johny's solution, because it's so succinct. How to make it repeat? – Shawn Taylor Commented May 11, 2014 at 20:51
• Could downvoter please provide reason for downvote? – Shawn Taylor Commented May 11, 2014 at 22:39

 |  Show 1 more ment

7 Answers 7

Sorted by: Reset to default 7

Try

jQuery(function () {
    var $els = $('div[id^=quote]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        })
    }, 2500)
})

Demo: Fiddle

Here is a working example:

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 2500)
}) 

this sounds like a job for...a slider. There are a ton of jQuery plugin options out there, I've always been a fan of Malsup

jQuery plugins by malsup

he even has responsive ones ready to go. Google "jQuery slider" to be overwhelmed with options.

Use a slider plugin there are lots on the internet. This is a simple snippet I wrote that works with any number of elements without having to change the javascript.

It's very easy to change.

http://jsfiddle/Ux9cD/39/

var count = 0;
 $('.wrapper div').css('opacity', '0');
var varName = setInterval(function() {
    //hide all the divs or set opacity to 0
 $('.wrapper div').css('opacity', '0');   
       //get length
       var length = $('.wrapper div').length;    
      //get first child:
       var start =  $('.wrapper div').eq(count);
    if (count < length) {
        animateThis(start,length,count);
       count++;

    } else {
       console.log('end of list');
        //restore back to hidden
        //set count back to 0
            $('.wrapper div').css('opacity', '0');
        count = 0;
    }
}, 2000);
varName;


function animateThis(start,length,count)
{

    $( start ).animate({
  opacity: 1
}, 1000, "linear", function() {
 //return count++;

});


}

This will do it if you set your second and third divs to hidden:

window.setInterval(function(){
    window.setTimeout(function(){
      $('#quote1').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
    }, 0);
    window.setTimeout(function(){
      $('#quote2').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
    }, 3000);
    window.setTimeout(function(){
      $('#quote3').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
    }, 6000);
}, 3000);

It's not going to do exactly what you want because fading takes time, so two divs will be onscreen at the same time. I tried to remedy this by having them fadeIn() slowly and fadeOut() quickly, but I'd remend taking out the fading altogether and just hiding them.

See demo.

Also, @ArunPJohny has a solution here that is a bit difficult to understand but does get rid of the fading delay problem. Alternatively, here's my no-fading solution.

HTML

<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>

JavaScript

i=0;
setInterval(function(){
    if(i%2 == 0)
        $('#div1').fadeOut('slow', function(){
            $('#div2').fadeIn('slow')
        })
    else
        $('#div2').fadeOut('slow', function(){
            $('#div1').fadeIn('slow')
        })    
    i++;
}, 2000)

Fiddle

Here is something you can try if you can do without fade in and fadeout. Just a simple few lines of java script no need to add any plugins etc.

Also look at this link Jquery delay it has sample with delay and fade in fadeout. May be you can tailor it to your needs.

Try in your browser

<html>
 <head>
  <script type="text/javascript">

function swapDiv(){
    var firstString = document.getElementById("quote1").innerHTML;
    var secondString = document.getElementById("quote2").innerHTML;
    document.getElementById("quote1").innerHTML = secondString;
    document.getElementById("quote2").innerHTML = firstString;
    setTimeout(swapDiv, 3000);

}
setTimeout(swapDiv, 3000);
  </script>
 </head>
<body>
<div id="quote1">I am another quote</div><span>
<div id="quote2">I am yet another quote</div><span>
 </body>
</html>

本文标签： jqueryAlternate content of a div every 3 seconds with javascriptStack Overflow