Question

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});  
    }
});

Answer 1

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.