jQuery .show('slide', { direction: 'right' }) doesn't work, but .show('slide') does

Question

I'm inserting a menu choice at the beginning of a top menu (ListItems) and using

$('#newMenuItem').show('slide');

successfully. However, I didn't like the way it slid in from the upper-left, so I changed it to

$('#newMenuItem').show('slide', { direction: 'right' });

Unfortunately, once I changed it I no longer get the new item at all. In fact, no code lower than the above line is getting executed anymore.

Is there an obvious reason why this wouldn't work? I'm using jquery-1.7.1 shipped with Visual Studio 2012.

Solution 1

The effect of sliding in a specific direction doesn't come bundled with vanilla jQuery, but it's instead part of jQuery UI; including jQuery UI (in addition to jQuery) in your project should make it available. See also the documentation for the effect here.

Solution 2

You can try $('#newMenuItem').slideDown();

Comments

[Olivier Pons]

And if we want only to have this effect, is there a minimal plugin that does this?

[Majid Ali Khan]

@OlivierPons You can always build your own customized JQuery-UI with JQuery-UI builder, and it is officially available, try here [jqueryui.com/download/] and select the animations, effects or whatever you need and download.