Question

如果你仔细查看这段脚本，你看到警告（'嘿'）;，这是在文件的头部附加五次...它不会导致任何问题，但我想知道如何让它只发生一次???

$('#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);
                    }
                });
            }
    });

Answer 1

它为每个选择器调用完整的函数（.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');

            });
        }
});

Answer 2

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

$('.home,.about,.investments,.media,.contact')

Answer 3

好的，谢谢你@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">' );
            }
    });

.append（）只有一次???它在头部追加了五次

3 个答案: