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/作为对话框的初始/最终位置，并为对话框的 opacity、left 和 top 属性设置动画。

Answer 2

$(function(){
        $("#modal-launcher, #modal-background, #modal-close").click(function () {
            $("#modal-content,#modal-background").show().animate({height: "10px", width: "10px"}, 500);
        return false;
        });
    });

Answer 3

尝试这样的事情：

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

Answer 4

使用animate函数给出效果。检查工作演示。

有关animate单击此处的更多信息：http: //api.jquery.com/animate/

查看演示：http: //jsfiddle.net/JRfA5/3/

Answer 5

试试这个代码：

小提琴是http://jsfiddle.net/JRfA5/4/

http://jsfiddle.net/JRfA5/5/

$(function(){
        $("#modal-launcher, #modal-background, #modal-close").click(function () {
            $("#modal-content,#modal-background").toggle(function() {
        $(this).animate({height: '800'});
    });
        return false;
        });
    });