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

您正在通过反复连接点击（在WITH lv0 AS (SELECT 0 g UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0 UNION ALL SELECT 0) ,lv1 AS (SELECT 0 g FROM lv0 a CROSS JOIN lv0 b) --10 * 10 = 100 ,lv2 AS (SELECT 0 g FROM lv1 a CROSS JOIN lv0 b) --100 * 10 = 1000 ,Tally (num) AS (SELECT ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) FROM lv2) SELECT (num+StartNo-1) as TicketNo, * FROM Tally CROSS JOIN Yourtable WHERE num <= booksize ORDER BY book内）创建一系列事件处理程序。 showReveal代替州，并使用fadeToggle()来阻止先前的动画首先完成。

stop()

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

请注意，您在示例中也使用了IIFE而不是DOM ready hander，因此我也改变了它，因为在新的较短版本中不需要它。 $(function () { $('p').hide(); $('h1').on('click', function(){ $('p').stop().fadeToggle(); }); });只是$(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＆＃34; fadeToggle＆＃34;函数和感谢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/

FadeIn＆amp; FadeOut冲突的Jquery

4 个答案: