使用jQuery在HTML中實現飛行效果

Question

這是我的情況

我在頁面頂部顯示了一個名為img.png的圖像，在頁面底部還有另一個名為fly_img.png（與img.png大小相同）的圖像。

我建立了一個按鈕，當我單擊它時，我希望fly_img.png飛行/動畫並放置在img.png上方。

我無法實現上述情況。 但是我嘗試了一些代碼，讓我與您分享。

 $("#clickme").click(function() { var p = $("#img").offset(); var v = $("#fly_img").offset(); $("#fly_img").animate({ opacity: 1, bottom: v.top - p.top, left: v.left - p.left }, 1000, function() { // Animation complete. }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <body> <button id="clickme"> Click here </button> <br /> <img id="img" src="img.png" alt="" "> <br /> <div style ="padding-left :350px;padding-top:150px "> <img id ="fly_img " src="fly_img.png " style="position: absolute; "alt=" "/> </div>

Answer 1

您可以在animation功能中定義圖像應到達的位置。 因此，您只需要將左和頂部動畫屬性設置為圖像應該飛到的屬性：

var to = $("#img").offset(); 
var from = $("#fly_img").offset(); 

$("#fly_img").animate({ 
  opacity: 1, 
  top:to.top, 
  left:to.left 
}, 1000, function () { 
  // Animation complete. 
});

小提琴： http : //jsfiddle.net/9s22xhsd/1/

Answer 2

您可以使用以下代碼：

$("#clickme").click(function () { 
    var p = $("#img").offset(); 
    var v = $("#fly_img").offset(); 

    $("#fly_img").css({"top": v.top+"px", "left": v.left+"px"}); 

    $("#fly_img").animate({ 
        opacity: 1, 
        top:p.top, 
        left:p.left 
        }, 1000, function () { 
        // Animation complete. 
        }); 
});

這將使圖片從當前位置飛到另一個圖像的位置。
工作小提琴：小提琴

Answer 3

當您使用absolute定位然后對left和top進行動畫處理時，也可以僅使用CSS transition ：

 /* jQuery */ $("#btn1").on("click", function(e) { $("#ifly").addClass("anim"); }); $("#btn2").on("click", function(e) { $("#ifly").removeClass("anim"); });

 /* CSS */ #i { position: absolute; left: 50px; top: 50px; } #ifly { position: absolute; left: 80%; top: 60%; transition: 1s all ease; } #ifly.anim { left: 50px; top: 50px; }

 <!-- HTML --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="btn1" type="button" value="Click" /> <input id="btn2" type="button" value="Reset" /> <hr/> <img id="i" src="http://lorempixel.com/g/100/100" /> <img id="ifly" src="http://lorempixel.com/100/100" />

使用jQuery在HTML中實現飛行效果

問題描述

3 個解決方案

解決方案1
1 2014-11-04 12:38:44

解決方案2
1 已采納 2014-11-04 12:47:47

解決方案3
1 2014-11-04 12:58:25

使用jQuery在HTML中實現飛行效果

問題描述

3 個解決方案

解決方案1 1 2014-11-04 12:38:44

解決方案2 1 已采納 2014-11-04 12:47:47

解決方案3 1 2014-11-04 12:58:25

解決方案1
1 2014-11-04 12:38:44

解決方案2
1 已采納 2014-11-04 12:47:47

解決方案3
1 2014-11-04 12:58:25