0

如果您查看您看到alert('hey');的这段脚本，则会在文档头部附加五次。它不会引起任何问题，但我想知道如何让它只发生一次。

$('#logo').fadeIn(2000, function() {
        $(this).animate({ top: "-=20px" },{
        duration: 1000, 
        specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
            complete: function () {
                $(this).animate({ top: "63px" },{
                duration: 1000, 
                specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
                    complete: function () {
                    }
                });
                $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{
                duration: 2000, 
                specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},     
                    complete: function () {
                        $('#ballTarp').remove();
                        $("head").append( '<link href="css/hoverStates.css" rel="stylesheet" type="text/css">' );
                        alert('hey');
                        $('#ball').removeClass('home').addClass('activeHome');
                        $('.activeTitle').fadeIn("fast");
                        $('.dropShadow').fadeIn(7000);
                        $('footer').fadeIn("fast");
                        $('.title').fadeIn("slow");
                        $('.login').fadeIn(3000);
                    }
                });
            }
    });
4

3 回答 3

3

它为您的每个选择器（.home、.about、.investments、.media、.contact）调用了完整的函数。

这就是为什么它附加5次。

这应该工作...

$('#logo').fadeIn(2000, function() {
    $(this).animate({ top: "-=20px" },{
    duration: 1000, 
    specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
        complete: function () {
            $(this).animate({ top: "63px" },{
            duration: 1000, 
            specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
                complete: function () {
                }
            });
            $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{
            duration: 2000, 
            specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},     
                complete: function () {
                    $('#ballTarp').remove();
                    // not here...
                    $('#ball').removeClass('home').addClass('activeHome');
                    $('.activeTitle').fadeIn("fast");
                    $('.dropShadow').fadeIn(7000);
                    $('footer').fadeIn("fast");
                    $('.title').fadeIn("slow");
                    $('.login').fadeIn(3000);
                }
            }, function(){
                // but here...
                $("head").append( '<link href="css/hoverStates.css" rel="stylesheet" type="text/css">' );
                alert('hey');

            });
        }
});
于 2012-11-28T17:36:51.767 回答
1

这是因为它运行了 5 次，选择器中的每个元素各运行一次。

$('.home,.about,.investments,.media,.contact')
于 2012-11-28T17:37:12.883 回答
0

好的，谢谢@teewuane 和@epascarello 让我看到了显而易见的...... #brainFart 但这是我修复它的方法

$('#logo').fadeIn(2000, function() {
        $(this).animate({ top: "-=20px" },{
        duration: 1000, 
        specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
            complete: function () {
                $(this).animate({ top: "63px" },{
                duration: 1000, 
                specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'},      
                    complete: function () {
                    }
                });
                $('.home,.about,.investments,.media,.contact').animate({ top: "+=106px" },{
                duration: 2000, 
                specialEasing: {top: 'easeOutQuad', left: 'easeOutQuad'},     
                    complete: function () {
                        $('#ballTarp').remove();
                        $('#ball').removeClass('home').addClass('activeHome');
                        $('.activeTitle').fadeIn("fast");
                        $('.dropShadow').fadeIn(7000);
                        $('footer').fadeIn("fast");
                        $('.title').fadeIn("slow");
                        $('.login').fadeIn(3000);
                    }
                });
                $("head").append( '<link href="css/hoverStates.css" rel="stylesheet" type="text/css">' );
            }
    });
于 2012-11-28T18:02:28.233 回答