首页 > 代码库 > JQuery 动画效果
JQuery 动画效果
//显示和隐藏 show() hide() 方法也可以没有任何参数 只是显示和隐藏
$("#btnid").bind("click",function(){
$("#divid").show("slow",function(){ //show方法用于显示元素 第一个参数是显示的速度,第二个参数是可选的 显示完成后执行该函数
alert("哈哈哈");
});
});
$("#btnid").bind("dbclick",function(){
$("#divid").hide("fast",function(){//hide方法用于隐藏元素 第一个参数是隐藏的速度,第二个参数是可选的 隐藏完成后执行该函数
alert("嘿嘿嘿");
});
});
//toggle() 显示或隐藏
$("#btnid").bind("click",function(){ //为btn绑定click事件
$("divid").toggle("fast",function(){ //如果div是隐藏的 点击按钮时div显示出来,如果div是显示的 点击按钮时div隐藏起来
$(this).val()=="隐藏"?$(this).val("显示"):$(this).val("隐藏"); //设置btn的显示val
});
});
//slideUp() 只用于已经显示的元素 向上滑动 slideDown() 只用于已经隐藏的元素 向下滑动
$("#btnid").bind("click",function(){
if($(this).val()=="隐藏"){
$("#divid").slideUp("fast",function(){ //把显示出来的div隐藏起来
$("#btnid").val("显示"); //隐藏之后把btn的val设置为显示
});
} else{
$("#divid").slideDown("slow",function(){ //把隐藏的div显示出来
$("#btnid").val("隐藏"); //显示出来后把btn的val设置为隐藏
});
}
});
//slideToggle() 向上或向下滑动
$("#btnid").bind("click",function(){
$("#div").slideToggle("fast",function(){ //如果div是显示的则隐藏 隐藏的话则显示
$("#btnid").val()=="向下滑动"?$("#btnid").val("向上滑动"):$("#btnid").val("向下滑动");
});
});
//fadeIn() 淡入(加载显示) fadeOut() 淡出(隐藏)
$("#btnid").bind("click",function(){
if($(this).val()=="淡入"){
$("#divid").fadeIn("fast",function(){
$(this).val("淡出");
});
} else{
$("#divid").fadeOut("fast",function(){
$(this).val("淡入");
});
}
});
//fadeTo() 设置淡入淡出 透明
$("span").each(function(index){
switch(index){
case 0:
$(this).fadeTo("fast",0.2,function(){ //第一个参数是淡入淡出的速度 第二个参数是透明度 0.0~1.0之间 第三个是回调函数(可选的参数)
alert("哈哈哈");
});break;
case 1:
$(this).fadeTo("fast",0.5,function(){
alert("哈哈哈");
});break;
case 2:
$(this).fadeTo("fast",0.9,function(){
alert("哈哈哈");
});break;
}
});
//animate() 自定义动画效果
$("span").animate({width:"80px",height:"80px"},3000,function(){
//第一个参数可选 设置的样式 多个样式之间用逗号分隔开,第二个参数是动画的速度 以毫秒为单位，第三个参数是可选的 回调函数
$("#divid").html("动画完成");
});
//animate() 移动位置
$("span").animate({width:"+=80px",height:"+=80px"},3000,function(){ //向右下角移动80px 80px
//第一个参数可选 设置的样式 多个样式之间用逗号分隔开,第二个参数是动画的速度 以毫秒为单位，第三个参数是可选的 回调函数
$("#divid").html("动画完成");
});
//stop()方法停止动画事件
$("#divid").stop(false,false); //二个参数都是可选的 第一个表示是否停止当前的动画 第二个表示是否完成正在执行的动画
//delay()方法延迟动画时间
$("#divid").delay(2000); // 将div的动画延迟两秒 单位是毫秒
JQuery 动画效果