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

您通过一次又一次地连接(内部showReveal)来创建一系列事件处理程序.fadeToggle()相反,状态stop()用于防止先前的动画首先完成.

$(function () {

    $('p').hide();

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

});

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

注意,在示例中您也使用IIFE而不是DOM就绪处理程序,因此我也改变了它,因为在新的较短版本中不需要它.$(function(){只是一个捷径$(document).ready(function(){.