2012年（62）
分类： 系统运维
2012-07-18 14:04:30
1、show()和hide()
a) hide:为每个元素调用hide方法会给将该元素的display设置为none
$(“element”).hide()相当于$(“element”).css(“display”,”none”);
show:当把元素隐藏后，可以使用show()方法将元素的display设置为先前的状态（block,inline等~）
eg:
$(function(){
$(".article#head").toggle(function(){
$(this).next().show();
$(this).css("background","#ccc");
},function(){
$(this).next().hide();
$(this).css("background","#fff");
});
});
b) show()和hide()方法让元素动起来
可以为show和hide方法传递一个速度参数。
show(“slow”);
show(1000);
hide(1000);//同时减少“内容”的高度、宽度、透明度
2、fadeIn()和fadeOut()只改变元素的透明度
fadeOut()会在指定的一段时间内降低元素的透明度，直到完全消失。fadeIn()则相反。
$(function(){
$(".article#head").toggle(function(){
$(this).next().fadeIn(2000);
$(this).css("background","#ccc");
},function(){
$(this).next().fadeOut(2000);
$(this).css("background","#fff");
});
});
3、slideUp和slideDown方法只改变元素高度
$(function(){
$(".article#head").toggle(function(){
$(this).next().slideDown(2000);
$(this).css("background","#ccc");
},function(){
$(this).next().slideUp(20*100);
$(this).css("background","#fff");
});
});
4、自定义动画
animate(params , speed ,callback);
params – 一个包含样式属性和值的集合
speed – 速度参数，可选
callback—在动画完成时执行的函数，可选
a) 自定义简单动画
$(function(){
$("#panel").click(
function(){
$("#panel").animate({right:"500px"} , 2000);
}
);
});
#panel{
position : absolute ;
width : 100px ;
height : 100px ;
background : #cc00ee ;
margin : 50px auto ;
}
b) 累加累减动画
$(function(){
$("#panel").click(
function(){
$("#panel").animate({left: "+=500px"} , 2000);//每次相对自身当
//前位置+500px }
);
});
c) 多重动画
i. 同时执行多个动画
$(function(){
$("#panel").click(
function(){
$("#panel").animate({left: "+=500px",height:"400px"} , 2000);//想左边移动，同时增加高度 }
);
});
ii. 按顺序执行多个动画
$(function(){
$("#panel").click(
function(){
$(this).animate({left:"+=500px"} , 2000);//让div在2秒//内距离左边500px
$(this).animate({height:"300px"} , 2000);//移动完成增//加高度
}
);
});
5、动画回调函数
上述show ， hide ， fadeIn ， fadeOut ， slideDown ， slideUp 都可以参数中传递一个函数，代表完成动画后触发的动作。
Eg： $(this).next().slideDown(2000 ,function(){
$(this).css("background","#eee");//动画完成后改变背景色
});
自定义动画的回调：
//动画完成后高度变为100
$(this).animate({height:"300px"} , 2000 ,function(){
$(this).css("height","100px");
});
6、停止动画stop();
语法结构：stop([clearQueue] [, gotoEnd]);
clearQueue—是否要清空未执行完的动画队列。
gotoEnd—是否直接将正在执行的动画跳转到末状态。
$(function()
{
$("#panel").hover
(
function()
{
$(this).animate({left:"+=500px",opacity:1 } , 2000);//让div在2秒内距离左边500px
$(this).animate({height:"200px"},2000);
},function()
{
$(this).stop();
}
);
});
直接使用stop（），则立即停止当前动画，执行接下来的动画。
上述代码如果使用是stop(true)则，只要光标移出，所有动画都停止。
使用stop(false , true)，如果在第一个动画未完成移出鼠标，则直接跳到第一个动画的结束状态，开始第二个动画。
使用stop(true,true)，如果在第一个动画未完成移出鼠标，则直接跳到第一个动画的结束状态，不再运行第二个动画。
7、判断某个元素是否处于动画状态（避免动画累积）
if($(element).is(":animated"))
{
return ;
}
或者
if(!$(elemenet).is(“:animated”)//判断是否正在运行动画
{
//如果没有动画，则添加新动画
}
8、其他动画方法
a) toggle();切换元素的可见状态，如果元素是可见的，则切换为隐藏的；如果是隐藏的，则切换为可见的。
$(function()
{
$(".article#head").click(function()
{
if($(this).next().is(":animated"))
{
return ;
}
$(this).next().toggle(1000,function(){});//切换可见状态
});
});
b) slideToggle()通过改变高度来实现隐藏和课件的切换，相当于slideDown和slideUp结合。
$(function()
{
$(".article#head").click(function()
{
if($(this).next().is(":animated"))
{
return ;
}
$(this).next().slideToggle(1000,function(){});
});
});
c) fadeTo();把元素的不透明度渐渐的调到指定的值。
$(this).next().fadeTo(1000,0.2[,function(){}]);
9、动画的方法概括
Animate代替show()： $(“p”).animate（｛width:”show”,height:”show”,opacity:”show”｝ , 400）；相当于$(“p”).show(400);
Animate代替fadeIn();$(“p”).animate({opacity:”show”}, 300) 相当于$(“p”).fadeIn(400);
Animate代替slideDown():$(“p”).animate({height：”show”} , 400)相当于$(“p”).fadeIn(400);
Animate代替fadeTo(); $(“p”).animate({opacity:”0.2”},400),相当于$(“p”).fadeIn(0.2 , 400 ) ;
转载自：
