CODEWITHSUNDEEP
jqueryhtmlanimation
MoreThanChaos
MoreThanChaos

Reputation: 2092

jQuery - Problem with executing animation of two separate objects, one after another

Hello I have problem to put together animations of two separate objects to second one start when first one ends. I tried to use callback but it seems that i make some syntax misteakes which crash jQuery or cause some unexpected behaviour. It seems that i'm stuck so I'd like to ask You for best way to put these animations together to act the way I want.

in mouseenter 1st .pp grows, 2nd .tt fade in

in mouseleave 1st .tt fade out, 2nd .pp shrink

It's alsp relevant that animations doesn't pile up, i mean here animation called by one event doesnt wait until other animation in progress will end. In generall exactly what is below but yo be animated one after another, not simultanously. 

$('.pp').bind({
    mouseenter: function() 
    {
        $(this).animate({ 
            width: $(this).children(".tt").outerWidth(),
            height: $(this).children(".tt").outerHeight()
          },{duration:1000,queue:false} );

        $(this).children(".tt").animate({ 
            opacity: 1.0
          }, {duration:1000,queue:false});  

    },
    mouseleave: function() 
    {
        $(this).children(".tt").animate({ 
            opacity: 0
          }, {duration:1000,queue:false});  
        $(this).animate({ 
            width: 17,
            height: 17
          }, {duration:1000,queue:false});  
    }
});

Upvotes: 0

Views: 813

Answers (2)

Nathan Osman
Nathan Osman

Reputation: 73185

I think you simply call .animate multiple times like so:

$(this).animate({ 
        width: $(this).children(".tt").outerWidth(),
        height: $(this).children(".tt").outerHeight()
        },{duration:1000,queue:false} ).children(".tt")
        .animate({ 
        opacity: 1.0
        }, {duration:1000,queue:false});

Give it a try and see if it works.

Upvotes: 0

SLaks
SLaks

Reputation: 887413

You need to add a completion callback, like this:

var me = $(this);
me.animate({ 
        width: me.children(".tt").outerWidth(),
        height: me.children(".tt").outerHeight()
    }, { 
        duration: 1000, 
        queue: false 
        complete: function() {
            me.children(".tt").animate(
                { opacity: 1.0 },
                { duration: 1000, queue: false }
            ); 
        }
    });

See the documentation.

Upvotes: 2

Related Questions