jQuery - проблема с выполнением анимации двух отдельных объектов, один за другим

Question

Здравствуйте. У меня проблема с объединением анимаций двух отдельных объектов для начала второго, когда заканчивается первый. Я пытался использовать обратный вызов, но кажется, что я допускаю некоторые ошибки синтаксиса, которые приводят к сбою jQuery или вызывают неожиданное поведение. Кажется, я застрял, поэтому я хотел бы попросить вас о наилучшем способе объединить эти анимации, чтобы они действовали так, как я хочу.

в мышином центре 1-й .pp растет, 2-й .tt исчезает

в mouseleave 1-й. Тт затухает, 2-й .pp сжимается

Также важно, чтобы анимация не накапливалась, я имею в виду, что анимация, вызываемая одним событием, не ожидает окончания другой анимации. В общем, именно то, что внизу, но будьте анимированы один за другим, а не одновременно.

$('.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

Вам необходимо добавить обратный вызов завершения, например:

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

См. Документацию .

Answer 2

Я думаю, вы просто вызываете .animate несколько раз, например:

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

Попробуйте и посмотрите, работает ли он.