javascript - 淡入后自动重复淡出

Question

$("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');
        }
    })
});

Answer 1

您可以使用 .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