Question

嘿伙计们，我有一个奇怪的，可能是罕见的问题。

单击链接时会调用以下函数。

$(selector).delay(500).animate({ backgroundColor: '#ccc' }, 300).delay(1000).animate({ backgroundColor: '#333' }, 300);

它所做的只是“突出显示”点击的项目1秒。

在同一个链接上，我在代码中进一步调用了另一个函数：

$(selector).animate({'height':'450px' }, 'fast', function() {
    console.log('has a delay')
})

发生的事情是，第二个动画不会立即触发，而是等待第一个动画完成（或类似的东西）。

因此'height'值的动画有一种超时。

知道如何解决这个问题吗？

更多信息：在包含#hash的所有链接上调用第一个函数。因此两个函数必须是不同的 - 我不能将它们合二为一。如果单击一个特定链接（其中包含#hash），则仅调用第二个函数。所以只为这一个链接触发了两个函数。

Answer 1

默认情况下，动画排队。如果您不希望您的动画排队，可以在.animate( properties, options )

的选项中指定它

queue：一个布尔值，指示是否将动画放在效果中队列。如果为false，则动画将为马上开始。

用你的例子来看，它可能看起来像这样：

$(selector).animate({
    'height': '450px'
     },{
    duration: 'fast',
    complete: function () {
        console.log('has a delay')
    },
    queue: false
});

显示jsfiddle上的队列行为的代码示例。

jquery：一次单击两个animate（）函数。延迟（）问题？

1 个答案: