如何在打开 Jquery SimpleModal 时添加动画？答案

【问题标题】：How to add animation on open of a Jquery SimpleModal?如何在打开 Jquery SimpleModal 时添加动画？
【发布时间】：2010-06-07 13:29:00
【问题描述】：

SimpleModal 站点中启用动画的示例具有以下动画：

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

这是代码：

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

我想要这个动画：

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

唉，简单地从上面的代码中删除dialog.overlay.fadeIn() 的第二个参数是行不通的。我也试过去掉dialog.container.show()的参数，也改成dialog.container.open()。我尝试了其他代码组合，但无济于事。

如何实现我想要的动画？

【问题讨论】：

标签： javascript jquery modal-dialog simplemodal

【解决方案1】：

你可以这样做：

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

既然您只想显示它，请完全删除回调，只显示modal 并同时在叠加层上启动.fadeIn() :)

【讨论】：

@Obay: 看起来dialog.data 也是默认隐藏的，答案已更新，再试一次:)
@Obay：它是模式内元素的引用，其中.container 指的是包裹它的<div>（SimpleModal 创建的），它用于显示、定位等。