Apply easing on jquery ui show?

Question

I'm trying to apply easing on a jquery ui show effect. Ideally the api would look something like this:

$(this).show('scale', {
  duration: 1000,
  easing: 'easeOutBounce', 
});

Currently the element is at display:none. I need to show it with the scaling effect and have an easing.

Do I have to separate the commands or is there something like this that would work?

Thanks.

Decumbent

Answer 1

I've tested it on jsfiddle and works:

$('.div1').show('scale', {
  duration: 1000,
  easing: 'easeOutBounce', 
});​

http://jsfiddle.net/tenshimsm/AUM6d/1/

Natch

This didn't work last year. Must have been an update on jquery's side. sweet in any case thanks – Decumbent

Last year?! Ooooops! Didn't see it. – Natch

Uncaught SyntaxError: Unexpected token ILLEGAL – Huntington

Answer 2

You need to remove comma (,) after easeOutBounce then it should work

$(this).show('scale', {
  duration: 1000,
  easing: 'easeOutBounce' 
});

Galaxy

I still get Uncaught SyntaxError: Unexpected token ILLEGAL – Huntington

Answer 3

Check firebug, when using code example it adds some hidden characters:

            jQuery('#search-container .fa-search').toggle('scale', {duration: 1000,easing: 'easeOutBounce'});​
            jQuery('#homepage-search').toggle('scale', {duration: 1000,easing: 'easeOutBounce'});​

Ruffianism