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/