这是我的情景,
我在页面顶部显示了一个名为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>
答案 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
定位,然后为left
和top
设置动画时,您也可以只使用CSS transition
:
/* 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;