jQuery animate()方法允许创建自定义的动画。
语法:$(selector).animate({params},speed,callback);
必需的params参数定义形成动画的CSS属性。
1. 例:animate()的简单应用,将<div>元素往右边移动了650像素。
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'650px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:80px;height:80px;background-color:green;position:absolute;"></div>
</body>
</html>
注意:设置position的属性值(默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!)
在jQuery的animate()方法中,第一个参数是一个必须参数,表示一个CSS属性和值的对象。
2.jQuery animate() --操作多个属性值
生成动画的过程中可同时使用多个属性:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'650px',
opacity:'0.5',
height:'50px',
width:'50px',
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:80px;height:80px;background-color:green;position:absolute;"></div>
</body>
</html>
注意:动画前后的效果,对应的代码是哪些
问:可以用animate()方法来操作所有的css属性吗?
答:是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jquery.com 下载 Color Animations 插件。
3.jQuery animate()--使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上+=或-=。
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=150px',
width:'+=150px',
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:80px;height:80px;background-color:green;position:absolute;"></div>
</body>
</html>
4.animate()--使用预定义的值
可以把属性的动画值设置为“show”,“hide”,“toggle”.
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:80px;height:80px;background-color:green;position:absolute;"></div>
</body>
</html>
5.animate()-使用队列功能
默认地,jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
var div=$("div");
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'});
div.animate({width:'300px',opacity:'0.8'});
div.animate({height:'100px',opacity:'0.4'});
div.animate({width:'100px',opacity:'0.8'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:80px;height:80px;background-color:green;position:absolute;"></div>
</body>
</html>
下面的例子把<div>元素往右边移动了100像素,然后增加文本的字号:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
var div=$("div");
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的position属性设置为relative,fixed,或absolute!</p>
<div style="width:180px;height:180px;background-color:green;position:absolute;">i love you</div>
</body>
</html>
6.jquery停止动画
jquery stop()方法用于在动画或效果完成前对它们进行停止。适合于所有jquery效果函数,包括滑动、淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd)
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法,不带参数:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#flip,#panel{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel{
padding:500px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我滑下面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>