javascript - 切换来自按钮的动画

Question

我有这个代码:

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function () {
        $("#modal-content,#modal-background").toggle("slow");
    return false;
    });
});

和这个 html:

<button id='modal-launcher'>
  Launch Modal Window
</button>

<div id='modal-background'></div>

<div id='modal-content'>
  <button id='modal-close'>Close Modal Window</button>
</div>

这是一个 JSFiddle .

现在，当您单击按钮时，模态框会出现在中间。相反，我想要一个动画，其中模态看起来来自按钮“启动模态窗口”按钮，然后转到中心。这可能吗？我正在网上寻找示例，但现在找不到，但我会继续寻找。

这可能吗？感谢所有帮助!

Answer 1

我想这取决于你想在上面投入多少工作，jQuery UI 对这种情况有默认效果，该选项称为“传输”，请查看 http://jqueryui.com/effect/

如果 jQuery UI 不是一个选项，您可以使用按钮 http://api.jquery.com/offset/作为对话框的初始/最终位置，并为对话框的不透明度、左侧和顶部属性设置动画。