如何使图像在 HTML 中移动位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8025270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an image move positions in HTML?
提问by Matt
I know, I am crazy, considering I am literally just learning HTML. But I am attempting to design a website for my brother, and he REALLY wants this. Please be very directional with your responses. I am using this JQuery thing to fade in and out a picture, so maybe I can use a similar thing to do this?
我知道，我疯了，考虑到我实际上只是在学习 HTML。但我正在尝试为我弟弟设计一个网站，他真的很想要这个。请对您的回答非常有方向性。我正在使用这个 JQuery 来淡入和淡出图片，所以也许我可以使用类似的东西来做到这一点？
By the way, I would like the image to slide to it's position, not just move in a flash.
顺便说一句，我希望图像滑动到它的位置，而不仅仅是瞬间移动。
Thanks!
谢谢！
采纳答案by enloz
JQuery .animate() is a way to go. Documentation and examples are provided on http://api.jquery.com/animate/
JQuery .animate() 是一种方法。http://api.jquery.com/animate/上提供了文档和示例
Here is a quick demo:
这是一个快速演示：
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>
