Question

The animation-enabled example in the SimpleModal site has this animation:

1. Fade in the overlay
2. Slide down the modal div

This is the code:

$("#the-div").modal({
onOpen: function (dialog) {
    dialog.overlay.fadeIn('fast', function () {
        dialog.data.hide();
        dialog.container.show('fast', function () {
            dialog.data.slideDown('fast');
        });
    });
}});

I want this animation instead:

1. Just display the modal
2. Fade in the overlay

Alas, simply removing the 2nd parameter of dialog.overlay.fadeIn() from the code above doesn’t work. I also tried removing the parameters of dialog.container.show(), also changing it to dialog.container.open(). I’ve tried other combinations of the code, to no avail.

How do I achieve the animation that I wish?

Answer 1

You can do it like this:

$("#the-div").modal({
  onOpen: function (dialog) {
    dialog.data.show();
    dialog.container.show();
    dialog.overlay.fadeIn('fast');
  }
});

Since you just want to display it, remove the callbacks altogether and just show the modal and kick off a .fadeIn() on the overlay at the same time 🙂