Using jQuery delay() with css()

Question

Why does delay() work here:

$('#tipper').mouseout(function() {
  $('#tip').delay(800).fadeOut(100);
});

But this fails to delay:

$('#tipper').mouseout(function() {
  $('#tip').delay(800).css('display','none');
});

// EDIT - here's a working solution

// EDIT 2 - some bugs fixed

$('#tipper').mouseleave(function() {
  setTimeout( function(){
    $('#tip').css({'display','none'});
       },800);
});

Ken Redler · Accepted Answer · 2015-04-22 19:17:12Z

138

delay() works with the animation (fx) queue. Changing a css property does not work via that mechanism, and thus is not affected by the delay directive.

There is a workaround -- you can inject the property change as a queued operation, like this:

$('#tip')
  .delay(800)
  .queue(function (next) { 
    $(this).css('display', 'none'); 
    next(); 
  });

Also, you should probably be using .hide() instead of .css('display','none').

Here's a working example: http://jsfiddle.net/redler/DgL3m/

edited Apr 22, 2015 at 19:17

answered Mar 22, 2011 at 18:36

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chris G-Jones Over a year ago

Hey I know this is an old post but could someone please explain why you have to call the 'next()' function after setting the css. I am using this and it works really well I just want to get my head around how it works

Ken Redler Over a year ago

@ChrisG-Jones, what happens is that the function that you're queuing (in the case above an anonymous function) automatically has passed into it another function that will dequeue the next item (moving the queue along). Above I've named that argument "next", although you could name it anything you like. So, inside the anonymous function, "next" is now a function that, when called, advances the queue. If I failed to invoke next() at the end of the anonymous function, nothing else in the queue (the fx queue) would run.

Chris G-Jones Over a year ago

@KenRedler thank's for the explanation, it is starting to make sense now.

Yan Foto Over a year ago

I tried it for a relatively small number of elements and was experiencing slow motion behaviour from the browser! any ideas why?

Ken Redler Over a year ago

@YanFoto, set up a test case on jsFiddle so we can take a look.

|

Benji XVI · Accepted Answer · 2017-12-09 09:35:04Z

26

A tiny jQuery extension can help with this. You might call it qcss:

$.fn.extend({
   qcss: function(css) {
      return $(this).queue(function(next) {
         $(this).css(css);
         next();
      });
   }
});

This lets you write:

$('.an_element')
   .delay(750)
   .qcss({ backgroundColor: 'skyblue' })
   .delay(750)
   .qcss({ backgroundColor: 'springgreen' })
   .delay(750)
   .qcss({ backgroundColor: 'pink' })
   .delay(750)
   .qcss({ backgroundColor: 'slategray' })

This can be a reasonably elegant way to define a chained animation. Note that in this very simple form, qcss only supports a single object argument containing CSS properties. (You’d have to do a bit more work to support .qcss('color', 'blue') for instance.)

Here’s an example on jsfiddle.

edited Dec 9, 2017 at 9:35

answered Jan 28, 2016 at 9:18

Benji XVI

2,3301 gold badge27 silver badges25 bronze badges

3 Comments

ADTC Over a year ago

Very cool! Absolutely neat! Kudos to you. queued css = qcss .. ha! I see what you did there! :D This needs to go into next jQuery version.

Benji XVI Over a year ago

Thanks for your kind words :)

CYoung Over a year ago

Very handy. Thanks for this. I used a variation for property setting... qcproperty: function (property, val) { return $(this).queue(function (next) { $(this).prop(property, val); next(); });

jAndy · Accepted Answer · 2011-03-22 18:44:25Z

12

Added to Ken Redler's answer / suggestion:

Also, you should probably be using .hide() instead of .css('display','none').

You can do :

$('#tip').delay(800).hide(0);

The 0 is important here. Passing a value to .hide() will implicitly add it to the fx queue and therefore, this will work like expected.

answered Mar 22, 2011 at 18:44

jAndy

237k57 gold badges313 silver badges363 bronze badges

1 Comment

jerrygarciuh Over a year ago

Thanks. Why is hide() better than setting the CSS?

Anton Dimitrov · Accepted Answer · 2013-07-09 12:21:33Z

0

test with all browser

$(document).ready(function () {
    var id = $("div#1"); // div id=1
    var color = "lightblue"; // color to highlight
    var delayms = "800"; // mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() {
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    }); 
});

answered Jul 9, 2013 at 12:21

Anton Dimitrov

511 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Using jQuery delay() with css()

4 Answers 4

7 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related