jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params 参数是必须存在的，它定义形成动画的 CSS 属性。
一下代码是简单的animate()函数的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){//加载完成时
$("button").click(function(){//鼠标点击事件
$("div").animate({//动画
left:'250px',//距离左边250像素点
opacity:'0.5',//透明度为0.5
height:'150px',//设置大小
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>运行结果截图：
形成了简单的动画效果
注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',//在当前基础上高度加上150像素点
width:'+=150px'这个执行一次后，会在每一次执行后的基础上变大。或变小。
可以把属性的动画值设置为 "show"、显示"hide"隐藏 或 "toggle"切换：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
}); $("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
}); 编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
这些代码逐个实现。
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
