jQuery缓动插件问题

Question

我在网上找到了一个教程。用jquery动画。我会在我网站的标题中为h1标签制作动画。我想在我的网站上的标题标题。我将这段代码用于动画。

/* Slogan (h1) effect header */ 
$(function() { 
    // make sure your h2's have a position relative 
    $('#header h1').css({ 
     left: '600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header h1').animate({ 
     left: 0 
    }, 1000); 
} 

/* Effect op logo */ 
$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

对于这个动画，我使用了jquery.easing1.3插件。现在来解决问题。随着我做的代码。只有对徽标的影响才会起作用。对h1的影响将会发挥作用。我应该做什么？那h1标志和header.logo动画？

谢谢！

Answer 1

已覆盖第二animate() ...你可以将其重命名，以固定的问题...

/* Effect op logo */ 

$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate2, 1000); 
}); 

function animate2() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

Answer 2

/* Slogan (h1) effect header */ 
$(function() { 
    // make sure your h2's have a position relative 
    $('#header h1').css({ 
     left: '600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header h1').animate({ 
     left: 0 
    }, 1000); 
} 

/* Effect op logo */ 
$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animateAgain() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

Answer 3

虽然Neurofluxation的解决方案将工作（除错字那无疑会被编辑当我完成这篇文章的时候......），这里有一些一般的不良习惯问题。

首先，如果您将所有这些代码都放在同一个页面中，则会有很多重复。我建议你重构一些，以使你的代码更加可重用。另外，即使将陈述将合并，也没有必要明确地将它们分开。这只是增加了代码，你不是真正感兴趣量

这是我会怎么做它：

$.easing.def = 'easeOutBounce'; 

$(function() { 
    $('#header h1').css({ left: '600px' }); 
    $('#header .logo').css({ top: '-600px' }); 

    setTimeout(animateAll, 1000); 
}); 

function animateAll() { 
    $('#header h1').animate({ left: 0 }, 1000); 
    $('#header logo').animate({ top: 0 }, 1000); 
} 

很干爽，你不觉得？ =）