Question

您好我有问题将第一个结束的两个单独对象的动画放在第二个开始。我试图使用回调，但似乎我做了一些语法错误，导致jQuery崩溃或导致一些意外的行为。似乎我被卡住了所以我想问你最好的方式将这些动画放在一起按照我想要的方式行事。

在mouseenter 1st .pp增长，第二.tt淡入

在mouseleave 1st .tt淡出，第二次.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 }
            ); 
        }
    });

请参阅documentation。

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

尝试一下，看看它是否有效。

jQuery - 一个接一个地执行两个独立对象的动画的问题

2 个答案: