切換動畫從按鈕

未來我有這樣的代碼：切換動畫從按鈕

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

和這個網站：

<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。

現在，當您單擊按鈕時，模式顯示在中心。相反，我想要一個動畫，其中的模態似乎來自按鈕「Launch Modal Window」按鈕，然後轉到中心。這可能嗎？我在網上尋找一個例子，但我現在找不到，但我會繼續尋找。

這可能嗎？感謝所有幫助！

來源

2013-10-28 the_

我想這取決於有多少，或者你想怎麼一點工作就可以了投資和jQuery UI有這種非常情況下默認的效果，該選項被稱爲「轉移」，檢查出來的 http://jqueryui.com/effect/

如果jQuery UI不是選項，則可以使用按鈕http://api.jquery.com/offset/作爲對話框的初始/最終位置，併爲該對話框的不透明度，左側和頂部屬性設置動畫。

來源

2013-10-28 04:36:39 leopic

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

來源

2013-10-28 04:40:37 anshuVersatile

嘗試是這樣的：

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

來源

2013-10-28 04:53:36

使用animate功能給予效果。檢查工作演示。

欲瞭解更多信息有關animate請點擊這裏：

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

來源

2013-10-28 04:58:30

試試這個代碼：

小提琴是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; 
     }); 
    });

來源

2013-10-28 05:05:09

切換動畫從按鈕

回答

相關問題