[英]jQuery “slideDown” animation not working
I have this little script which is supposed to: 我有这个小脚本,它应该:
1) slideUp the element with class="text" 1)使用class =“ text”滑动元素
2) Change the inner content with "This is the new text" 2)使用“这是新文本”更改内部内容
3) slideDown the hidden text. 3)向下滑动隐藏的文本。
var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
$(this).html(newText);
}).queue(function(){
$(this).slideDown("400");
});
But the third step is misteriously not working. 但是第三步显然是行不通的。 I can see through DOM inspector the 2 step worked and the content actually changed.
我可以通过DOM inspector看到2步有效,并且内容实际上已更改。 But the ".text" element remains with style="display:none;".
但是“ .text”元素保留为style =“ display:none;”。
I don't know what is wrong, there are no errors. 我不知道出什么问题了,没有错误。 Why is this (not) happening?
为什么会这样(不发生)?
See http://jsfiddle.net/rhg94f5b/ 看到http://jsfiddle.net/rhg94f5b/
You don't need to queue animations, just call one after the other. 您无需排队动画,只需一个接一个地调用。 You can change the text on the complete callback of the first slide and then slide down:
您可以在第一张幻灯片的完整回调中更改文本,然后向下滑动:
$(".text").slideUp("400", function() {
$(this).html(newText);
}).slideDown("400");
There is no need for you to use .queue()
here. 您无需在此处使用
.queue()
。
Use the callback functions provided by jQuery's animation methods like .slideUp()
: 使用jQuery的动画方法(如
.slideUp()
提供的回调函数:
var newText = "This is the new text";
$(".text").slideUp(400, function(){
$(this).html(newText).slideDown(400);
});
If you really must use .queue()
you can do. 如果确实必须使用
.queue()
,则可以执行。 But you don't queue after changing the .html()
as it isn't a queued method. 但是,更改
.html()
后,您无需排队,因为它不是排队方法。 You just need to .dequeue()
and then call .slideDown()
: 您只需要
.dequeue()
然后调用.slideDown()
:
var newText = "This is the new text";
$(".text").slideUp("400").queue(function(){
$(this).html(newText).dequeue().slideDown(400);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.