CODEWITHSUNDEEP
jqueryperformancejquery-animate
MEHRYĀR.S
MEHRYĀR.S

Reputation: 77

How can I show JQuery effects at same time?

I use below code but it's not working synchronic, how can I do it?

$(".Bio").click(function(){
     $(".BioText p").delay(2000).fadeIn(600).animate({margin:"0 0 0 0"},600,'easeInOutExpo');
});

Upvotes: 0

Views: 42

Answers (2)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

Alternatively to Yotam Omer's answer, you can use the (properties[, options]) way of writting .animate. In the option object, you can turn the queue to false :

$(".Bio").click(function(){
     $(".BioText p").delay(2000)
     .fadeIn(600)
     .animate({margin:"0 0 0 0"}, {
         duration : 600,
         easing : 'easeInOutExpo',
         queue : false
     });
});

queue (default: true)

Type: Boolean or String

A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15376

You can try something like this:

$(".Bio").click(function(){
     $(".BioText p").delay(2000).animate({margin:"0 0 0 0", opacity:1},600,'easeInOutExpo');
});

This will animate both the opacity and margin together. Creating the desired fade in effect. Just make sure that in your CSS:

.BioText p{
    display:block;
    opacity:0;
}

Upvotes: 1

Related Questions