本文主要是介绍jQuery实现小骑车的移动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
html代码部分
<!DOCTYPE html>
<html><head><title>停车动画</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="style.css" rel="stylesheet" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="script.js"></script></head><body><img class="car" src="http://img.mukewang.com/5343d553000107a107200701.jpg" width="350" height="341"/> </body>
</html>
css样式布局
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7;
}.car{ position:absolute;top:0px;left:0px;}js代码
$(document).ready(function(){$(".car").mouseover(function(){$(this).animate({top:'300px'},{duration:"300"});}); $(".car").mouseout(function(){$(this).animate({top:'0px'},{duration:"300"});});});jQuery可以很方便的获取到html结构中的某一个元素。
$(document).ready(function(){ //表示整个文档代码结构加载完毕
$(".car").mouseover(function(){ //鼠标移入
$(this).animate({top:"300px"},{duration:"300"});
});
$(".car").mouseout(function(){ //鼠标移除
$(this).animate({top:"0px"},{duration:"300"});
});
});
jQuery的事件方法------》事件方法会触发匹配元素的事件，例如：$(button#demo).click(function(){ alert("okkkkkk"); });
更多事件方法介绍
animate动画
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params:必选项，参数定义的形成动画css属性；
speed:可选，用于设定完成动画所需的时长；
callback:可选，动画完成后所执行的返回函数名称。
$("button").click(function(){
$("#div").animate({left:"200px"});
});
jQuery animate（）动画操作多个属性
$("button").click(function(){
$("#div").animate({
left:'200px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
这篇关于jQuery实现小骑车的移动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
