实现jQuery UI切换缓动功能

Question

I'm beginning to use the jQuery UI, and I'm trying to use an easing function other than the default ones available with the .toggle() effect in jQuery.

This is what I have now. How do I adjust this to use one of the easing functions from the UI, for example the 'explode' function?

$(document).ready(function() {
   $('#signin').click(function(e) {
      $('#signinbox').toggle(300);
   });
});

Answer 1

per the docs: http://api.jqueryui.com/toggle/

.toggle( effect [, options ] [, duration ] [, complete ] )

 $('#signinbox').toggle('explode', 300);

Must include appropriate jqueryUI.js resources as this won't work with jQuery core toggle() method

Answer 2

Try like this:

$('#signin').click(function(e) {
    $('#signinbox').toggle('explode', 300);
});​

jsFiddle example