FadeIn和FadeOut冲突Jquery

Question

我试图显示单击到h1标签的段落。 当用户单击h1时，段落将显示，但是当我单击h1时，段落将显示不正常，当我再次单击时，段落将隐藏，但是当我再次执行相同的操作时，淡入和淡出效果将同时起作用。

这是我的JSFIDDLE示例： https ://jsfiddle.net/9pLnkqz8/

这是我的HTML：

    <h1>REVEAL</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

这是我的JQUERY：

 (function(){

        $('p').hide();

        var object = {

            revealContent:$('p'),

            showReveal:function(){

                $('p').fadeIn();
                $('h1').on('click', object.hideReveal);

            },

            hideReveal:function(){

                $('p').fadeOut();

            }

        };

        $('h1').on('click', object.showReveal);

    })();

Answer 1

通过一次又一次地单击click（在showReveal内部）来创建事件处理程序链。 fadeToggle()改为使用状态，并使用stop()防止先前的动画首先完成。

$(function () {

    $('p').hide();

    $('h1').on('click', function(){
        $('p').stop().fadeToggle();
    });

});

JSFiddle： https ://jsfiddle.net/TrueBlueAussie/9pLnkqz8/2/

注意，在示例中，您还使用IIFE而不是DOM ready处理程序，因此我也进行了更改，因为新的较短版本不需要它。 $(function(){只是$(document).ready(function(){的快捷方式$(document).ready(function(){ 。

Answer 2

您可以使用以下代码：

  (function(){

        $('p').hide();


        $('h1').on('click', function(){
            $('p').fadeToggle('slow');
        });

    })();

演示： https : //jsfiddle.net/9pLnkqz8/3/

Answer 3

编辑您的jquery以仅切换p元素

(function(){

    $('p').hide();

    var object = {

        revealContent:$('p'),

        toggleReveal:function(){
            if($('p').is(":visible"))
                $('p').fadeOut();
            else
                $('p').fadeIn();                
        }

    };

    $('h1').on('click', object.toggleReveal);

})();

编辑：
我们可以使用Jquery的“ fadeToggle”功能，感谢TrueBlueAussie，我们需要调用stop来防止以前的动画

(function(){
    $('p').hide();
    $('h1').on('click', function(){
         $('p').stop().fadeToggle();
     });
})();

Answer 4

使用fadeToggle()

$('p').hide();


$('h1').click(function() {
  $('p').stop().fadeToggle()( "slow", function() {
  // Animation complete.
  });
});`

https://jsfiddle.net/9pLnkqz8/7/