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/作为对话框的初始/最终位置，并为对话框的不透明度，左侧和顶部属性设置动画。

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;
        });
    });

切换来自按钮的动画

5 个答案: