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