使用jquery在HTML中飞行效果

时间:2014-11-04 12:32:53

标签: javascript jquery html

这是我的情景,

我在页面顶部显示了一个名为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> 

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

您可以使用此代码:

$("#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. 
        }); 
});

这会使照片从当前的位置飞到另一个图像的位置。
工作小提琴:fiddle

答案 2 :(得分:1)

当您使用absolute定位,然后为lefttop设置动画时,您也可以只使用CSS transition

&#13;
&#13;
/* jQuery */

$("#btn1").on("click", function(e) {
    $("#ifly").addClass("anim");
});
$("#btn2").on("click", function(e) {
    $("#ifly").removeClass("anim");
});
&#13;
/* 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;
}
&#13;
<!-- 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" />
&#13;
&#13;
&#13;