CODEWITHSUNDEEP
javascriptjqueryhtml
Walter White
Walter White

Reputation: 369

Text fadein/fadeout animation in loop

I am trying to create simple animation in loop but every time it works wrong.

How should it work?

Test 1 fadein, wait 2 seconds and

Test 2 fadein, wait 2 seconds and

Test 3 fadein, wait 2 seconds and

Test 4 fadein, wait 2 seconds and

fadeout Test 1, Test 2, Test 3, Test 4 at the same time (important, I can't achieve this)

then

Test 5 fadein, wait 2 seconds and

Test 6 fadein, wait 2 seconds and

Test 7 fadein, wait 2 seconds and

Test 8 fadein, wait 2 seconds and

fadeout Test 5, Test 6, Test 7, Test 8 at the same time (important, I can't achieve this)

loop all process.

My html code:

<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>

    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

And here is my JS:

$(document).ready(function() {

        var cycle;

        (cycle = function() {
            $('.slogan1').delay(1000).fadeIn(3000);
            $('.slogan2').delay(3000).fadeIn(3000);
            $('.slogan3').delay(5000).fadeIn(3000);
            $('.slogan4').delay(7000).fadeIn(3000);
            $('.slogan1, .slogan2, .slogan3, .slogan4').delay(10000).fadeOut(3000);

            $('.slogan5').delay(13000).fadeIn(3000);
            $('.slogan6').delay(15000).fadeIn(3000);
            $('.slogan7').delay(17000).fadeIn(3000);
            $('.slogan8').delay(19000).fadeIn(3000);
            $('.slogan5, .slogan6, .slogan7, .slogan8').delay(21000).fadeOut(3000);

        })();
    });

Upvotes: 6

Views: 629

Answers (5)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

UPDATED

Working fiddle

Using setInterval for loop :

setInterval(function(){
    $('.test1, .test2').show();
    $(".test1 [class*='slogan'], .test2 [class*='slogan']").hide();

    cycle();
}, 6000);

Try to group the first 4 test under div with class test1, and same for second tests with class test2 :

JS :

cycle = function() {
    $('.slogan1').delay(500).fadeIn();
    $('.slogan2').delay(1000).fadeIn();
    $('.slogan3').delay(1500).fadeIn();
    $('.slogan4').delay(2000).fadeIn();
    $('.test1').delay(2500).fadeOut();

    $('.slogan5').delay(3000).fadeIn();
    $('.slogan6').delay(3500).fadeIn();
    $('.slogan7').delay(4000).fadeIn();
    $('.slogan8').delay(4500).fadeIn();
    $('.test2').delay(5000).fadeOut();
};

cycle();

HTML :

<div class="col-md-12 slogan text-right">
    <div class="test1">
        <h1 class="slogan1">test 1</h1>
        <h1 class="slogan2">test 2</h1>
        <h1 class="slogan3">test 3</h1>
        <p  class="slogan4">test 4</p>
    </div>

    <div class="test2">
        <h1 class="slogan5">test 5</h1>
        <h1 class="slogan6">test 6</h1>
        <h1 class="slogan7">test 7</h1>
        <p  class="slogan8">test 8</p>
    </div>
</div>

Hope this help.

Upvotes: 2

Shomz
Shomz

Reputation: 37701

Using delays is innacurate and your animations will start overlapping in time. I suggest you us callback functions, like this:

var i = 0,
    delay = 2000;

function show(){
  if (i && i % 4 == 0 && $('.slogan > *:visible').length > 0) {
    $('.slogan > *:visible').fadeOut().promise().done(doShow);
    if (i == 8)
      i = 0;
  }
  else 
    doShow();  
}

function doShow(){
  $('.slogan > *').eq(i++).fadeIn(function(){
    setTimeout(show, delay);
  })
}

show();
.slogan > * {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>

    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

Upvotes: 2

blex
blex

Reputation: 25634

Here is a different approach, which kind of works like a plugin, with options:

/* The cycle function performs successive fadeIns using the provided selectors
 * and finishes by fading them all out, and executing a provided callback
 */
function cycle(options) {
  var settings = {
    'selectors': options.selectors || [],
    'remaining': options.selectors.slice().reverse() || [],
    'delay'    : options.delay || 1000,
    'duration' : options.duration || 3000,
    'complete' : options.complete || function() {}
  };

  cycleStep();

  function cycleStep() {
    if(!settings.remaining.length){
        var callbackExecuted = false;
        $( settings.selectors.join(', ') ).delay(settings.delay)
                                          .fadeOut(settings.duration, function(){
                                            if(!callbackExecuted){
                                                settings.complete();
                                                callbackExecuted = true;
                                              }
                                          });
    }
    else
        $( settings.remaining.pop() ).delay(settings.delay)
                                     .fadeIn(settings.duration, cycleStep);
  }
}

/* This function will loop the cycles with the options you provide it */
function myLoop(){
  cycle({
    selectors: ['.slogan1', '.slogan2', '.slogan3', '.slogan4'],
    complete: function() {
      cycle({
        selectors: ['.slogan5', '.slogan6', '.slogan7', '.slogan8'],
        complete: myLoop
      });
    }
  });
}

// Execute the loop
myLoop();

JS Fiddle Demo

Upvotes: 3

Vince Verhoeven
Vince Verhoeven

Reputation: 1773

it's more efficient to put a class around the two sections and fadeout those. I don't think this works straight away but, gets you in the right way

<div class="col-md-12 slogan text-right">
    <div class='section1'>
        <h1 class="slogan1">test 1</h1>
        <h1 class="slogan2">test 2</h1>
        <h1 class="slogan3">test 3</h1>
        <p  class="slogan4">test 4</p>
    </div>
    <div class='section2'>
        <h1 class="slogan5">test 5</h1>
        <h1 class="slogan6">test 6</h1>
        <h1 class="slogan7">test 7</h1>
        <p class="slogan8">test 8</p>
    </div>
</div>

and js

var counter = 0;
setInterval(function(){
    counter++

    $('.slogan'+counter).delay(1000).fadeIn(3000);

    if (counter === 4) $('section1').delay(1000).fadeOut(3000);
    if(counter > 8){ 
        $('section2').delay(1000).fadeOut(3000);
         counter = 0
       }
}, 2000);

Upvotes: 1

rrk
rrk

Reputation: 15846

    var itemIndex = 0;
function changeDisp(){
    if(itemIndex > 0 && itemIndex % 4 == 0){
        $('.slogan').children().slice(0, itemIndex ).hide('slow');
        if(itemIndex == 8)
            itemIndex = 0;
    }
    $('.slogan').children().eq(itemIndex).fadeIn();
    itemIndex++;
}
setInterval(changeDisp, 2000);
.slogan h1, .slogan p{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-12 slogan text-right">
    <h1 class="slogan1">test 1</h1>
    <h1 class="slogan2">test 2</h1>
    <h1 class="slogan3">test 3</h1>
    <p  class="slogan4">test 4</p>

    <h1 class="slogan5">test 5</h1>
    <h1 class="slogan6">test 6</h1>
    <h1 class="slogan7">test 7</h1>
    <p class="slogan8">test 8</p>
</div>

Upvotes: 1

Related Questions