jQuery效果——动画

最新推荐文章于 2023-01-07 11:09:27 发布

青柠晶晶的1024

最新推荐文章于 2023-01-07 11:09:27 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38835140/article/details/84548832

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>