如何使用jquery动画在屏幕上移动图像

时间:2018-05-03 15:22:11

标签: javascript jquery html jquery-animate

我试图在整个屏幕上移动图像,但它只是从上到下从左到右移动然后停止。
这是我的javascript代码。

          $(function(){
$("#btn1").click(function(){
        $("#p2").animate({width:300 })
        $("#p2").animate({left:'600px'})
        $("#p2").animate({top:'400px'})
        $("#p2").animate({right:'100px'})
        $("#p2").animate({bottom:'400px'})
});
});    

这是我的HTML

<img src="myimage.png" id="p2" />      
<button id="btn1">click</button>
<style>
#p2{
position:absolute;

}
</style>

如果有人知道如何在屏幕上为图像设置动画,那么请帮助我解决我的分配。谢谢您的时间。

1 个答案:

答案 0 :(得分:0)

<script>
$(document).ready(function(){
    $("#b").animate({left: "+=500"}, 2000);
    $("#b").animate({top: "+=300"}, 1000);
    $("#b").animate({left: "-=500"}, 1000);
    $("#b").animate({top: "-=300"}, 1000);

});
</script>
<div id="b" style="position:absolute; top:50px">

<img src="img/codelab-1.jpg" width="200px"/></div>