jQuery动画
案例思路：
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
img {
/*动画基于定位*/
position:relative;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function show(){
$("img").fadeIn(3000,function(){//使用淡入效果来显示一个隐藏的 元素
alert("已显示");
});
}
function hide(){
$("img").fadeOut(3000,function(){
alert("已隐藏");
});
}
function del(){
$("p[style]").fadeIn(1000).fadeOut(3000);
}
function go(){
//参数1:偏移量（直接量/json对象）
//参数2：时间
//参数3：回调函数
$("img").animate(
{"left":"300px"},2000)
.animate({"top":"300px"},2000)
.animate({"left":"0"},2000)
.animate({"top":"0"},2000,function(){
alert("ok");
});
}
</script>
</head>
<body>
<p>
<input type="button" value="显示"
onclick="show();">
<input type="button" value="隐藏"
onclick="hide();">
<input type="button" value="删除"
onclick="del();">
<input type="button" value="走起"
onclick="go();">
</p>
<p>
<img alt="" src="../images/01.jpg">
</p>
<p style="display:none;">操作成功</p>
</body>
</html>最终页面显示效果：点击对应按钮触发对应事件
