jQuery“ slideDown”动画不起作用

Question

我有这个小脚本，它应该：

1）使用class =“ text”滑动元素

2）使用“这是新文本”更改内部内容

3）向下滑动隐藏的文本。

var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
    $(this).html(newText);
}).queue(function(){
    $(this).slideDown("400");
});

但是第三步显然是行不通的。 我可以通过DOM inspector看到2步有效，并且内容实际上已更改。 但是“ .text”元素保留为style =“ display：none;”。

我不知道出什么问题了，没有错误。 为什么会这样（不发生）？

Answer 1

看到http://jsfiddle.net/rhg94f5b/

您无需排队动画，只需一个接一个地调用。 您可以在第一张幻灯片的完整回调中更改文本，然后向下滑动：

$(".text").slideUp("400", function() {
    $(this).html(newText);
}).slideDown("400");

Answer 2

您无需在此处使用.queue() 。

使用jQuery的动画方法（如.slideUp()提供的回调函数：

var newText = "This is the new text";
$(".text").slideUp(400, function(){
    $(this).html(newText).slideDown(400);
});

如果确实必须使用.queue() ，则可以执行。 但是，更改.html()后，您无需排队，因为它不是排队方法。 您只需要.dequeue() 然后调用.slideDown() ：

var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
    $(this).html(newText).dequeue().slideDown(400);
});

的jsfiddle