CODEWITHSUNDEEP
jqueryjquery-animate
Raihan Iqbal
Raihan Iqbal

Reputation: 407

jQuery animations getting slower towards the end and a bit jittery

I have a couple of pages that I would like to transition like we do in powerpoint. The first few transitions work perfectly but the last two transitions take too long to finish. If I reduce the animation time, it overlaps with the next animation so I had to use setTimeout(). Here's the fiddle http://jsfiddle.net/yWAgp/

var currentPageNumber = 1;
jQuery.easing.def = "linear";

$(document).ready(function () {
    $(".divContentContainer").center();
    AnimatePage1();
})

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) +
    $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) +
    $(window).scrollLeft() + "px");
    return this;
}

var ResetPageContainer = function () {
    $(".pages").html("");
}

var AnimatePage1 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-1").html());
    $('.page-1-img').animate({
        opacity: 100,
        width: "538px",
        height: "166px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage2(); }, 1200);
    });
};

var AnimatePage2 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-2").html());
    $('.page-2-img').animate({
        opacity: 100,
        width: "698px",
        height: "151px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage3(); }, 1200);
    });
};

var AnimatePage3 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-3").html());
    $('.page-3-img').animate({
        opacity: 100,
        width: "894px",
        height: "116px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage4(); }, 4000);
    });
};

var AnimatePage4 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-4").html());
    $('.yours').animate({
        opacity: 100,
        width: "585px",
        height: "276px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage5(); }, 6000);
    });
};

var AnimatePage5 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-5").html());
    $('.tommylogo').animate({
        opacity: 100,
        width: "960px",
        height: "120px"
    }, 3000, function () {

    });
};

Thanks

Upvotes: 0

Views: 482

Answers (1)

Alnitak
Alnitak

Reputation: 339816

I can't tell exactly what you did wrong, but I rewrote some of the code and now if works fine - see http://jsfiddle.net/alnitak/j5zeL/

The code now looks like:

var load = function(id) {
    $('.pages').empty();
    $(id).appendTo('.pages').show();
};

var AnimatePage1 = function() {
    load('#page-1');
    $('.page-1-img').animate({
        opacity: 100,
        width: "538px",
        height: "166px"
    }, 3000).fadeOut(1000, AnimatePage2);
};

...

Notes:

  1. explicitly moving the content into the display div as DOM elements, rather than serialising and deserialising - add a .clone() if you need the animation to repeat.

  2. explicitly calling .show() on the new content to override the initial display: none

  3. no need for timers - just starting the next animation in the callback of the fadeOut

Upvotes: 1

Related Questions