FadeIn 后自动重复 FadeOut答案

【问题标题】：Auto repeat FadeOut after FadeInFadeIn 后自动重复 FadeOut
【发布时间】：2014-03-22 07:37:05
【问题描述】：

$("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”类中有几个方格。当我按下按钮时，我想显示它们并将文本从“全部显示”更改为“全部隐藏”。

当我再次按下按钮时，我想做相反的事情，隐藏方块并将文本从“全部隐藏”更改为“全部显示”，以便可以一次又一次地完成。

问题是在第一次显示 - 隐藏 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');
        }
    })
});

【问题讨论】：

那个小提琴好像是空的。
我的回答对你有用吗？
是的，菲利克斯。我使用了您在我的第一篇文章（编辑后）中看到的方式，但您的回答帮助我理解了很多。非常感谢！

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案2】：

JS FIDDLE DEMO

这就是我的做法：使功能发挥作用，正在设置类，即 show_cls、hide_cls

$("#myBotton_div").on('click', '.show_cls', function () {
        $(".patr").fadeIn("slow");
        $(this).text("Hide them all");
        $(this).removeClass('show_cls');
        $(this).addClass('hide_cls');
    });

    $("#myBotton_div").on('click', '.hide_cls', function () {
        $(".patr").fadeOut("slow");
        $(this).text("Show them all");
        $(this).removeClass('hide_cls');
        $(this).addClass('show_cls');
    });

【讨论】：