CODEWITHSUNDEEP
jquerycss
Biomehanika
Biomehanika

Reputation: 1540

chain jQuery's actions one after the other with delays

I builted a web with jQuery animations, but when I tested it on mobile devices grrrr.. Now I am trying to make as much as possible with CSS as I did not know how terribly bad works this on mobile devices.

I am trying to fade out and in some elements, adding the CSS classes .easeOuts for fading out, and .easeIns for fading in:

.easeIns{
   opacity:1;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;   
}

.easeOuts{
   opacity:0;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;   
}

I tried fading an element out:

$('.sectionTitle').addClass('easeOuts');

And works great making a linear fading out, but when trying to keep on programming this element's suposed actions (fading out, changing content while invisible and fading in again) it just does not apply the fade out and in effects, changing just content without respecting any order:

$('.sectionTitle').addClass('easeOuts').delay(100).html("hola").removeClass('easeOuts').addClass('easeIns');

How can I create a chain to respect action's orders and delays between them? Is this the correct way to animate elements with CSS?

Upvotes: 0

Views: 333

Answers (3)

Huangism
Huangism

Reputation: 16438

As an alternative to timeout you can try the following

$('.sectionTitle').fadeIn(0).delay(100).html("hola").removeClass('easeOuts').addClass('easeIns');
$('.sectionTitle').addClass('easeOuts');

Upvotes: 0

Saksham
Saksham

Reputation: 9380

For the effects specified in JQuery, use Callback Functions. These functions can be called once the current segment is complete.

For eg, defunethe function to be executed after the action is complete

function complete() {
$( "<div>" ).text( this.id ).appendTo( "#log" );
}

And Call the effect as

$( "#box1" ).fadeOut( 1600, "linear", complete );

This will fade the element and once it is done, will call complete()

Upvotes: 0

presidentnickson
presidentnickson

Reputation: 1085

Quick example using setTimeout to achieve what you're after!

$('.sectionTitle').addClass('easeOuts');
setTimeout(function(){ $('.sectionTitle').html("hola").removeClass('easeOuts').addClass('easeIns'); }, 100);

Upvotes: 1

Related Questions