Search code examples
jqueryjquery-uijquery-ui-dialog

How to change the jQuery effect duration time in button event

I have set effects on my UI dialog on show and hide: 

show: {
  effect: "blind",
  duration: 600
},
hide: {
  effect: "explode",
  duration: 1000
},

I also have a few buttons, and I would like to set different effects on pressing them with closing dialog. The problem is that effects are showing too fast.

Here's my code for the buttons:

buttons: {
  Yes: function () {
    $(this).dialog("option", "hide", "explode").dialog("close");
  },

How do you set the effect duration time in the method .dialog("option",...,...)?

Solution

  • You can pass an object defining the effect and duration as the third parameter:

    buttons: {
    Yes: function () {
        $(this).dialog("option", "hide", {
            effect: "explode",
            duration: 100
        }).dialog("close");
    },

    See this Fiddle for a demo