动画
JQuery的动画有以下几种:
1显示、隐藏
Heid():隐藏
Heid():隐藏
<body>
<div id="div1">
</div>
<button id="btnHide">消失</button>
</body>
<script type="text/javascript">
$("#btnHide").click(function() {
$("#div1").hide(10000);
});
</script>
将高度、宽度、透明度改变为0,display为“none”
Show():显示
<body>
<div id="div1">
</div>
<button id="btnShow">显示</button>
</body>
<script type="text/javascript">
$("#btnShow").click(function() {
$("#div1").show(10000);
});
</script>
将高度、宽度、透明度显示为初始的css设置的样式,display为“block”
Toggle():切换
<body>
<div id="div1">
</div>
<button id="btnToggle">切换</button>
</body>
<script type="text/javascript">
$("#btnToggle").click(function() {
$("#div1").toggle();
});
</script>
如果display为none时,点击就会变成black,如果display为black时,点击后则为none。
将高度、宽度、透明度改变为0,display为“none”
Show():显示
将高度、宽度、透明度显示为初始的css设置的样式,display为“block”
Toggle():切换
如果display为none时,点击就会变成black,如果display为black时,点击后则为none。
2淡入、淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度(透明度从0到1),让他显示出来。
fadeOut():淡出
将显示的样式改变其透明度(透明度从1到0),让他隐藏起来。
fadeToggle():淡入、淡出的切换
如果样式是隐藏的,则将它显示出来;如果样式是显示的,则将它隐藏起来。
fadeTo():固定其透明度(透明度在0到1之间)
3上滑、下滑
slideUp():上滑
将设置的高从初始边为0,然后隐藏它。
slideDown():下滑
先显示它,然后将设置的高度从0到初始。
slideToggle():上滑与下滑切换
如果元素是隐藏的,则先让它显示,然后把它的高度增加,如果元素是显示的话,先将高度减为0,,再让他隐藏
4动画
自定义动画
移动一个块到另一个位置
<body>
<button>开始动画</button>
<div id="p">
</div>
</body>
<script type="text/javascript">
$("button").click(function() {
//设置多个css属性
$("#p").animate({left:'300px',top:'300px'});
</script>
同时使用多个属性实现动画效果(移动位置和大小还有颜色)
<body>
<button>开始动画</button>
<div id="p">
</div>
</body>
<script type="text/javascript">
var p = $("#p");
//设置相关属性
$("#p").animate({
left:'300px',
width:'+=100px',
height:'+=100px',
opacity:'0.5'
});
});
</script>
改变预定义值来实现我们所需内容的显示或隐藏
//预定义值
$("#p").animate({
height:'toggle'
});
Animate()中有三个参数
第一个参数是需要改变样式
第二个参数是显示的速度(slow,fast 指定秒数)
第三个参数回调元素
<body>
<button id="star">开始</button>
<button id="end">结束</button>
<div id="div1">
</div>
</body>
<script type="text/javascript">
var div = $("#div1");
$("#star").click(function() {
div.animate({height:'450px'},"slow");
div.animate({width:'450px'},"slow");
div.animate({height:'200px'},"slow");
div.animate({width:'200px'},"slow");
});
$("#end").click(function (){
div.stop(true);
});
</script>