CODEWITHSUNDEEP
jqueryjquery-animatefadeinjquery-callback
Mahmood Kohansal
Mahmood Kohansal

Reputation: 1041

run callback function with its parent in jquery

I want to run animations for the links (q2 ul li a) while showing (q2) in same time, q2 will be hidden on page load.

$('.q2').fadeIn(function(){
$('.q2 ul li a').animate({ borderSpacing : 1 }, {
    step: function(now,fx) {
    $(this).css('-webkit-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')'); 
    $(this).css('-moz-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
    $(this).css('transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');    
    },
    duration:1500 }, 'linear')
});
});

and in css :

ul li a {
    border-spacing: 0;
}

Upvotes: 0

Views: 120

Answers (1)

Stiger
Stiger

Reputation: 1199

In your code, animation will be execute after $('.q2') visible because you put this animation in the callback of fadeIn function. Maybe it should like this:

$('.q2').fadeIn(1500);
$('.q2 ul li a').animate({ borderSpacing : 1 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')'); 
        $(this).css('-moz-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
        $(this).css('transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');    
    },
    duration:1500 }, 
    'linear')
});

Upvotes: 1

Related Questions