jQuery"滑动下降”;动画不起作用

jQuery "slideDown" animation not working

本文关键字：动画 不起作用 quot jQuery      更新时间：2023-09-26

我有一个小脚本，应该是：

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检查器看到这两个步骤是有效的，内容实际上发生了变化。但是".text"元素仍然使用style="display:none；"。

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

请参阅http://jsfiddle.net/rhg94f5b/

您不需要对动画进行排队，只需一个接一个地调用即可。您可以更改第一张幻灯片的完整回调上的文本，然后向下滑动：

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

这里不需要使用.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

相关文章：