12

is it possible to smoothly fadein a jquery modal dialog? (can't find anything in the docs). i've tried fadeTo but didn't help.

djot
  • 2,952
  • 4
  • 19
  • 28
Fuxi
  • 7,611
  • 25
  • 93
  • 139

2 Answers2

23

You can use the show option (admittedly not well named, too general), like this:

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

The close animation is the matching hide option, for example:

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

You can give it a try here

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • works in your demo but not with me :/ need to figure out what's wrong - thanks anyway! – Fuxi Aug 08 '10 at 11:12
  • 1
    @Fuxi - Which version of jQuery UI are you using? `fade` was added as an effect in 1.8, won't work in prior versions. – Nick Craver Aug 08 '10 at 11:13
  • yep i had an old version - just updated jquery to 1.42 and ui to 1.84 - still same problem :/ works nice when using: me.dialog("open"); but not with: me.dialog({ show: 'fade' }); when using fade simply nothing will happen.. – Fuxi Aug 08 '10 at 11:41
  • @Fuxi - Any errors in your console? Keep in mind that my answer is about the *setup*, not the open call. For instance, if you have `autoOpen: false` you still need to call `.dialog('open')`, and the `show` option should be in your setup options, for example: `.dialog({ autoOpen: false, show: 'fade' })` then later `.dialog('open')`. – Nick Craver Aug 08 '10 at 11:44
  • thx - that was the problem :) i put it in the options, it shows up - but now next problem: it's not fading in but folding in! the dialog is also plain white (no header bar, no content) – Fuxi Aug 08 '10 at 11:58
  • @Fuxi - very odd, do you have a link to a page I can see the behavior in? – Nick Craver Aug 08 '10 at 12:00
3

You could define show and hide as objects which will give you access to more options:

$("#element").dialog({
    show: {
        effect: 'fade',
        duration: 200 //at your convenience
    },
    hide: {
        effect: 'fade',
        duration: 200 //at your convenience
    }
});
vivanov
  • 1,422
  • 3
  • 21
  • 29