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

发布于 2024-09-04 04:28:52 字数 693 浏览 7 评论 0原文

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()。我尝试过其他代码组合，但无济于事。

如何实现我想要的动画？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若有似无的小暗淡 2024-09-11 04:28:52

您可以这样做：

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

因为您只想显示它，所以完全删除回调并仅显示 modal 并启动 .fadeIn() 同时在叠加层上:)

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 :)

回复收藏 0 原文

~没有更多了~