CODEWITHSUNDEEP
jqueryjquery-animate
user1161032
user1161032

Reputation: 143

Odd jQuery animate delay

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

Answers (1)

A. Wolff
A. Wolff

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

Related Questions