Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:

$('#dialog').dialog({show:'drop', hide:'drop'});

However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:

$('#dialog').dialog({
   show:{effect:'drop', direction:'right'},
   hide:{effect:'drop', direction:'right'}
});

Is this possible?

I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.

After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.

Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:

$('#dialog').dialog({show:'drop', hide:'drop'});

However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:

$('#dialog').dialog({
   show:{effect:'drop', direction:'right'},
   hide:{effect:'drop', direction:'right'}
});

Is this possible?

I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.

After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.

• javascript
• jquery
• jquery-ui
• dialog
• effects

3 Answers 3

Actually, you can use any of the jQuery UI effects; e.g. pulsate:

$("#dialog").dialog({ show: "pulsate" });

There are plenty to be found here: http://docs.jquery./UI/Effects/

Note that there is a dependency on effects.core.js.

I tried passing an option (like you did) into 'show', it didn't work. I also tried to make 'show' a function, no luck avail.

What works however is:

$("a").click(function() {
    $("#dialog").hide("drop", { direction: "right" }, 1000);
});

This is currently not Possible with 1.6 and 1.7.1.

You may find this link of dialog box examples useful. In particular the second one from the right. I'm not sure if it's using the standard dialogue plugin, but you should be able to figure it out from the examples they use.