CODEWITHSUNDEEP
javascriptjquerycssjquery-uianimation
Xeen
Xeen

Reputation: 7003

How to use easeOutBounce animiation on display block?

So I'd like to use jQuery ui effect easeOutBounce on my mobile menu, the script goes as follows:

$("#navbar-checkbox, .mobile-menu-wrapper .13").click(function(){
  $("#mobile-nav").({ display: 'block' }, 600, 'easeOutBounce');
})

but this doesn't work, it doesn't even change the css to display: block.

  1. How can I use display block with animation?
  2. Can you please show me how to apply easeOutBounce to it as well

Thank you.

Upvotes: 0

Views: 118

Answers (1)

urbz
urbz

Reputation: 2667

So, you need to use jQuerys .css() style manipulation in order to set the style of the element that is intended to be animated. This is done first.

After that, to get the animation to work as you want it too, you want .slideDown() to be triggered after the css attribute is set on the element, with the duration and the specified effect (easeOutBounce)

Code snippet:

$("#mobile-nav").css('display','block').slideDown(600, 'easeOutBounce');

Upvotes: 2

Related Questions