<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery效果-动画</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.animateDiv{
background: #98bf21;
height: 100px;
width: 100px;
position: absolute;
}
</style>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$(".animateDiv").animate({left:'500px'},"slow");
});
$("#button2").click(function(){
$(".animateDiv").animate(
{
left:'500px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("#button3").click(function(){
$(".animateDiv").animate(
{
left:'+=150px',
height:'+=20px',
width:'+=20px'
}
);
});
$("#button4").click(function(){
var div = $(".animateDiv");
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"
);
});
$("#button5").click(function(){
var div=$(".animateDiv");
div.animate({left:'200px'}, "slow");
div.animate({fontSize:'+=30px'}, "slow");
});
});
</script>
</head>
<!--jQuery效果-动画
jQuery animate()方法允许您创建自定义的动画
jQuery动画-animate()方法
jQuery animate()方法用于创建自定义动画
语法
$(selector).animate({params},speed, callback);
必需的params参数定义形成动画的CSS属性
可选的speed参数规定效果的时长.他可以取以下值:"slow","fast"或者毫秒
下面的例子演示了animate()方法的简单应用.
他把<div>元素往右边移动了250像素;
实例
$("button").click(function(){
$("div").animate({left:'500px'},"slow");
});
默认情况下,所有HTML元素都有一个静态位置,且无法移动.
如果需要对位置进行操作,要记得首先把元素的CSS position属性设置为relative, fixed或者absolute
jQuery animate()-操作多个属性
请注意,生成动画的过程中可同时使用多个属性
$("#button2").click(function(){
$(".animateDiv").animate(
{
left:'500px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用animate()方法操作所有的css属性吗?
是的,几乎可以.不过要记住一件重要的事情:当使用animate()时,必须使用Camel标记书写的属性名
比如,必须使用paddingLeft而不是padding-left,使用marginLeft而不是margin-left等等
同时,彩色动画并不包含在核心jQuery库中
如果需要生成彩色动画,您需要从jquery.com生成颜色动画插件
jQuery animate()-使用相对值
也可以定义相对值(该值相对于元素的当前值).需要在值得前面加上+=或-=.
实例
$("#button3").click(function(){
$(".animateDiv").animate(
{
left:'+=150px',
height:'+=20px',
width:'+=20px'
}
);
})
jQuery animate()使用队列功能
默认的,jQuery提供针对动画的队列功能
这意味着如果您在彼此之后编写多个animate()调用,jQuery会创建包含这些方法调用的"内部"队列.
然后逐一运行这些animate调用
$("#button4").click(function(){
var div = $(".animateDiv");
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"
);
});
下面的例子把<div>元素往右边移动了100像素，然后增加文本的字号
$("#button5").click(function(){
var div=$(".animateDiv");
div.animate({left:'200px'}, "slow");
div.animate({fontSize:'+=30px'}, "slow");
});
-->
<body>
<button id="button1">开始动画</button>
<button id="button2">多个属性开始动画</button>
<button id="button3">相对属性开始动画</button>
<button id="button4">队列功能开始动画</button>
<button id="button5">队列右移增加字号</button>
<p>默认情况下,所有HTML元素有一个静态位置并且是不可移动的.
如果需要改变,我们需要将元素的position属性设置诶relative,
fixed,或者absolute!</p>
<div class="animateDiv">HELLO</div>
</body>
</html>
