CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
ripper234
ripper234

Reputation: 230376

Why does jQuery dialog shrink while fading out?

$("#dialog").dialog({
    resizable: false,
    height:140,
    modal: true,
    hide: {effect: "fadeOut", duration: 5000},
    buttons: {
        Save: function() {
            alert("Saved");
            $("#dialog").dialog( "close" );
        },
        Cancel: function() {
            $("#dialog").dialog( "close" );
        }
    }
});

I'm using Chrome. Here's a demo.

When I close the dialog, it hides, but also shrinks.

I didn't tell it to shrink! Why does it do that?

Upvotes: 2

Views: 433

Answers (3)

Ajeet Sinha
Ajeet Sinha

Reputation: 2345

$("#dialog").dialog({
    resizable: false,
    height:140,
    modal: true,
    hide: {effect: "fade", duration: 5000},
    buttons: {
        Save: function() {
            alert("Saved");
            $("#dialog").dialog( "close" );
        },
        Cancel: function() {
            $("#dialog").dialog( "close" );
        }
    }
});

Upvotes: 1

xdazz
xdazz

Reputation: 160963

Because fadeIn and fadeOut are not valid values for the show and hide options. If you remove effect: "fadeOut", the result will be same. The valid option is fade.

Upvotes: 2

techfoobar
techfoobar

Reputation: 66693

Using fade instead of fadeOut will solve the issue.

Check this: http://jsbin.com/alafez/4/edit#preview

Upvotes: 2

Related Questions