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.

score 11 · Accepted Answer · answered May 15 '12 at 00:00

11

I've tested it on jsfiddle and works:

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

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

answered May 15 '12 at 00:00

msmafra

1,704
3
21
34

This didn't work last year. Must have been an update on jquery's side. sweet in any case thanks – Harry May 16 '12 at 22:55
Last year?! Ooooops! Didn't see it. – msmafra May 17 '12 at 00:12
Uncaught SyntaxError: Unexpected token ILLEGAL – May 22 '13 at 18:21

score 4 · Answer 2 · answered May 15 '12 at 00:07

4

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

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

answered May 15 '12 at 00:07

Dips

3,220
3
20
21

I still get Uncaught SyntaxError: Unexpected token ILLEGAL – May 22 '13 at 18:28

score -1 · Answer 3 · answered Jul 30 '14 at 07:58

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'});â€‹

Apply easing on jquery ui show?

3 Answers3