Question

嵌套fadeToggle on＆＃39;＃hero-text＆＃39;当我点击英雄＆＃39; ID和我试图找出原因，以及如何解决此问题。

$(document).ready(function() {
        $('#hero').click(function() {
            $('.non-hero').fadeToggle(800, function() {
                $('#hero-text').fadeToggle();
            });
        });
});

Answer 1

我不时遇到过这种情况。你可以花时间去弄清楚原因，但是如果你想要一个快速的解决方案，你可以去：

$(document).ready(function() {
        $('#hero').off().click(function() {
            $('.non-hero').fadeToggle(800, function() {
                $('#hero-text').fadeToggle();
            });
        });
});

上述答案将解决“＃hero＆＃39;正在获得额外的约束力。但是，你可能遇到的另一个案例是“非英雄”和＃39;用于多个地方。该函数将针对它的每个实例触发，然后导致单独的事件触发fadeToggle＆＃39;＃hero-text＆＃39;。

根据你的jsfiddle，试试这个：

    $(document).ready(function() {
        $('#hero').click(function() {
            $('.non-hero').fadeToggle(800);
            setTimeout(function() {
                $('#hero-text').fadeToggle();
            }, 800);
        });
        $('#primary').click(function() {
            $('.non-primary').fadeToggle(800);
            setTimeout(function() {
                $('#primary-text').fadeToggle();
            }, 800);
        });
        $('#secondary').click(function() {
            $('.non-secondary').fadeToggle(800);
            setTimeout(function() {
                $('#secondary-text').fadeToggle();
            }, 800);                    
        });
    });

对于咯咯笑声，我发布了一个替代的jsfiddle供你考虑：

http://jsfiddle.net/GbgvH/3/

为什么嵌套fadeToggle会发射两次？

1 个答案: