$("document").ready(function(){
$("button.art").click(function() {
$(".patr").fadeIn("slow");
$("button.art").text("Hide them all").promise().done(function(){
$("button.art").click(function() {
$(".patr").fadeOut().promise();
$("button.art").text("Show them all").promise();
}) }) }) });
我在“patr”类中有几个方 block 。 当我按下按钮时,我想显示它们并将文本从“全部显示”更改为“全部隐藏”。
当我再次按下按钮时,我想做相反的事情,隐藏方 block 并将文本从“全部隐藏”更改为“全部显示”,以便可以一次又一次地完成。
问题是第一次显示-隐藏cicle后,fadeOut功能自动启动。
我做错了什么? 这是我的 jsfiddle 链接 http://jsfiddle.net/#&togetherjs=gndOED4Qiq
编辑: 另一个更简单和正确的版本:
$("document").ready(function () {
$("button.art").click(function () {
$(".patr").fadeToggle();
if ($(this).hasClass('show')) {
$(this).text('Hide Them All');
$(this).removeClass('show').addClass('hide');
}
})
});
最佳答案
您可以使用 .fadeToggle() 来缩短代码 在淡入和淡出动画之间切换以及使用三元运算符设置按钮的文本:
$("document").ready(function () {
$("button.art").click(function () {
$(".patr").fadeToggle("slow");
var text = $(this).text();
$(this).text(text == "Hide them all" ? "Show them all" : "Hide them all");
})
});
<强> Fiddle Demo
关于javascript - 淡入后自动重复淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22574843/