代码之家 › 专栏 › 技术社区 › MoreThanChaos

jquery-执行两个独立对象的动画时出现的问题,一个接一个

animation html jquery

MoreThanChaos · 技术社区 · 15 年前

你好,我有问题把两个独立对象的动画放在一起,直到第二个对象在第一个对象结束时开始。我试图使用回调,但似乎我犯了一些语法错误,这些错误会导致jquery崩溃或导致一些意外的行为。我好像被卡住了,所以我想问你最好的方法把这些动画组合起来,按照我想要的方式来表演。

在mouseenter 1.pp增长,2.tt淡入

in mouseleave 1st.tt淡出,2nd.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});  
    }
});

2 回复 | 直到 15 年前

SLaks 15 年前

您需要添加一个完成回调,如下所示:

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 .

Nathan Osman 15 年前

我想你只需要打个电话就可以了。像这样动画多次:

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

试一试,看看是否有效。