jQuery效果——动画

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>
 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值