fadeout time slipping jquery
I've been having a bit of trouble getting the following fadeout code to work as i'd like.
Both temporary divs ($tempBackgroundTop, $tempBackground) should fadeout at the same time but one is fading out at just before the other.
Any ideas?
Cheers!
jQuery(document).ready(function () {
jQuery("a.trigger").click(function (event) {
event.preventDefault();
var speed = 1e3,
$body = jQuery("body"),
$background = jQuery("#background"),
$page = jQuery("#page"),
$tempBackgroundTop = jQuery("<div/>").attr("id", "tempBackgroundTop").addClass("blueTop"),
开发者_JAVA百科 $tempBackground = jQuery("<div/>").attr("id", "tempBackground").addClass("blue");
$page.after($tempBackgroundTop).after($tempBackground);
$body.removeClass("blue").addClass("turquoise");
$background.removeClass("blueTop").addClass("turquoiseTop");
jQuery.when($tempBackgroundTop.fadeOut(speed), $tempBackground.fadeOut(speed)).done(function () {
$tempBackgroundTop.remove();
$tempBackground.remove();
});
});
});
This is beacuse you are calling the fadeout
one before the other, try this:
var $tobefaded = jQuery("#tempBackgroundTop, #tempBackground");
jQuery.when($tobefaded.fadeOut(speed)).done(function () {...
This should fade both of them at the same time.
Each browsers will probably be different. Try adjusting the milliseconds passed in to get them synced.
Have you tried using jQuery 1.6 to see if it solves the issue? See this snippet from 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.
精彩评论