Reputation: 143
I'm working on a simple function to hide a message when a user clicks a close button. The odd thing is that when I use this code, everything works fine except for an odd 7ish second delay. I'm setting a div to transition into 0 opacity over 1000ms and then changing the z-index to put it behind everything after. This all works fine except for the delay on the opacity transition. When using this code:
$(".x").bind("click",function() {
$('#holder').animate({opacity: "0"}, 1000, "easeOutQuart");
setTimeout(function() {
$('#holder').css('z-index','-1');}, 1000);
I get an unexplained delay of of about 7 seconds. If I change the code to this:
$(".x").bind("click",function() {
$('#holder').css('display','none');
setTimeout(function() {
$('#holder').css('z-index','-1');}, 1000);
The effect is instant. Obivously the setTimeout function is overkill with the display but I'm just showing it's unrelated to the timing issue from what I can tell.
Some have asked why not use fadeOut() and there's no reason not to, but it doesn't change the delay issue. Still about a 7 second delay using this code:
$(".x").click(function () {
$("#holder").fadeOut("slow");
});
I've tried a number of things including adding a .stop() call before the animation. While the delay is confusing, the function works as a whole. When you click .x, the #holder div fades (after a delay) and then the z-index is changed to be behind the rest of my divs. I'm happy with the function and method, just confused why it's such a dramatic delay. The only other item I can think to make note of is that the code is all inside a php file and used through . Cant think why that would change it though.
Any ideas on this one?
Upvotes: 0
Views: 186
Reputation: 74410
This should work:
$(".x").bind("click",function() {
$('#holder').animate({opacity: "0"}, 1000, "easeOutQuart",function(){
$(this).css('z-index',-1);
});
});
I dont understand purpose of using "easeOutQuart" on opacity property and dont know what effect are you expecting.
BTW, i will suggest you to use fadeOut()
instead of animate.
UPDATE
Not sure what is your issue, but try this maybe, depending of your html code:
$(".x").click(function (e) {
e.stopPropagation();
$("#holder").fadeOut("slow");
});
Upvotes: 1