CODEWITHSUNDEEP
jqueryeffects
Walrus
Walrus

Reputation: 20444

JQuery Effects slide unexpected delay

The following code determines what the link target was sidebar or page and from that slides panels accordingly. The sidepanel ones work unison with the the visible sidepanel sliding out left sycronising with one sliding in from the right.

The page ones however 'main' do not. The left one slides out and the new plane slides in after a delay of around 300ms. This should not happen as the code is the same. Any ideas.

var panel = $('.sidewrapper:visible');
var panelnext = $('.sidewrapper:visible').next();
var paneltarget = $('.sidewrapper:visible').next().find('.sidescroller').children();

var page = $('.mainwrapper:visible');
var pagenext = $('.mainwrapper:visible').next();
var pagefirst = $('.mainwrapper:visible').first();
var pagetarget = $('.mainwrapper:visible').next().find('.mainscroller').children();

if (target == 'sidebar') {
    $(paneltarget).html(data.sidepanel);
    $(panel).hide('slide', { direction: 'left' }, 300); $(panelnext).show('slide', { direction: 'right' }, 300);
    }
    else if (target == 'page') {
    $(pagefirst).find('.mainscroller').children().html(data.sidepanel);
    $(page).hide('slide', { direction: 'left' }, 300); $(pagefirst).show('slide', { direction: 'right' }, 300);
    }

Any ideas,

Marvellous

Upvotes: 0

Views: 276

Answers (1)

DarthJDG
DarthJDG

Reputation: 16591

I just had the jQuery 1.6 release announcement pop up in my RSS reader an hour ago, you might be delighted to find the following in the release notes:

Synced Animations

In jQuery you can have multiple animations running simultaneously (even multiple on the same element, animating different properties). In 1.6 we’ve introduced an enhancement that ensures that all animations are synced to the same timer interval. This had the potential to create problems before as animations could become slightly out-of-sync (even by a couple milliseconds) resulting in slightly “off” animations.

Smoother Animations

Additionally jQuery is now using the new requestAnimationFrame method provided by browsers to make our animations even smoother. We can use this functionality to avoid calling timers and instead depend upon the browser to provide the best possible animation experience.

Give it a try, it might just be what you need.

Upvotes: 1

Related Questions