jQuery easing plugin problem

Question

Hello,

I found a tutorial on the internet. To animate things with jquery. I would animate a h1 tag in the header of my website. And i would like a logo on my website in the header. I used this code for the animation.

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

For this animation, i used the jquery.easing1.3 plugin. Now come the problem. With the code that i make. Only the effect on the logo will play. The effect on the h1 will nog play. What i must do? That the h1 logo and the header.logo animate????

Thanks !!!!

Answer 1

you have overwritten the second animate()... you can rename it to fixed the problem...

/* 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

Although Neurofluxation's solution will work (except for the typo that no doubt will be edited away by the time I'm done with this post...), there are some general bad practice issues here.

To start with, if you have all of this code in the same page, there's a lot of repetition. I suggest you refactor some, to make your code more reusable. Also, even though the $(function () { }); statements will be merged, there's no need to explicitly write them apart. That just increases the amount of code that you're not really interested in.

This is how I'd do it:

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

Nice and DRY, don't you think? =)