一。控制元素的显示及隐藏
show( )控制元素的显示,hide( )控制元素的隐藏
1 $(selector).show([speed],[callback]); 2 //speed可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast 3 4 $(selector).hide([speed],[callback]); 5 //callback可选。show函数执行完之后,要执行的函数
例子:
$("element").show("slow"); //元素将在600毫秒内慢慢地显示出来
$("element").show("normal"); //元素将在400毫秒内慢慢地显示出来
$("element").show("fast"); //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000"); //元素将在1000毫秒(1秒)内慢慢地隐藏
二。改变元素的透明度
fadeIn( )和fadeOut( )可以通过改变元素的透明度实现淡入淡出效果
$(selector).fadeIn([speed],[callback]);
//speed可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
$(selector).fadeOut([speed],[callback]);
//callback可选。fadeIn函数执行完之后,要执行的函数
例子:
$("#panel h5.head").toggle(function(){
$(this).next("div.content").fadeOut();
},function(){
$(this).next("div.content").fadeIn();
});
三。改变元素的高度
slideDown( )可以使元素逐步延伸显示
slideUp( )则使元素逐步缩短直至隐藏
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});
例子:
$("#panel h5.head").toggle(function(){
$(this).next("div.content").slideUp();
},function(){
$(this).next("div.content").slideDown();
});
四。自定义动画
$(selector). animate({params},speed,callback);
(1)params: 一个包含样式属性及值的映射,比如{property1: "value1", property2: "value2", ····· }
(2)speed : 速度参数,可选。
(3)callback:在动画完成时执行的函数,可选。
例子:
点击<div>时,会缓慢的移动
<head>
<style>
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid #0050D0;
}
</style>
</head>
<div id="panel">click me</div>
<script>
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
});
</script>