1

I made two divs that slide in and out of visibility upon the press of a button, by adding and removing classes with jQuery and a CSS transition. In this fiddle, pressing one of the buttons works to slide the div over 0.4 seconds: http://jsfiddle.net/uo14dowo/4/

But when I added a few delays, the 0.4s transition suddenly became instantaneous: neither the delay nor the transition are now working. http://jsfiddle.net/uo14dowo/3/

Why is this?

1
  • Not sure this helps, but the jquery show has default duration of 400 ms. Perhaps it is overriding the transition. If you add an option to increase the duration to be more than the transition time it might help. for example show({duration: 500}). Hope this is what you are looking for.
    – David
    Mar 25, 2015 at 21:45

3 Answers 3

2

show and hide are not animation methods by default, but you can make them so by passing a duration parameter – in this case, the number 0:

var d= 400;
$("#btn-1").click(function() {
  $("#left").addClass('show').removeClass('clear').delay(d).show(0);
  $("#right").addClass('clear').removeClass('show').delay(d).hide(0);
});

$("#btn-2").click(function() {
  $("#left").removeClass('show').addClass('clear').delay(d).hide(0);
  $("#right").removeClass('clear').addClass('show').delay(d).show(0);
});

Fiddle

2
  • What does delay(d) do?
    – Joe Morano
    Mar 25, 2015 at 21:49
  • I added var d= 400; while testing my answer. It's the same as calling delay(400). Mar 25, 2015 at 21:50
2

.delay() only works with animation method. show() is not an animation method. However if you provider a value to show it makes it animated.

Try:

.delay(400).show(0)
1

From the documentation:

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Here I have modified your fiddle, removing the show and hide calls, and you can see that the transitions are unaffected by the delays.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.