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); 
} 

很乾爽，你不覺得？ =）