web前端学习：jQuery动画

hide()方法

参数:可以是一个number类型,也可以是字符串类型

• $("div").hide(1000);//参数是数字 

• $("div").hide("slow");//参数是字符串200ms 

• $("div").hide("normal");//参数是字符串400ms

• $("div").hide("fast");//参数是字符串600ms 

$("div").hide(1000,function () { 

    alert("隐藏完毕"); 

});

show()方法

• $("div").show(1000);//参数是数字

• $("div").show("slow");//参数是字符串200ms 

• $("div").show("normal");//参数是字符串400ms 

• $("div").show("fast");//参数是字符串600ms

$("div").show(1000,function () {

     alert("显示完毕"); 

});

隐藏动画案例：

$("#btn1").click(function () { 

    $("div>img:last-child").hide(1000,function () {

        //使用arguments.callee所以我们不需要指定函数 

            $(this).prev().hide(1000,arguments.callee); 

            }); 

         }); 

$("#btn2").click(function () { 

    $("div>img:first-child").show(1000,function () {

         //使用arguments.callee所以我们不需要指定函数

             $(this).next().show(1000,arguments.callee); 

                });

           });

其他动画方法

• $("div").slideUp(1000);//滑入 

• $("div").slideDown(1000);//滑出

•  $("div").slideToggle(1000);//切换滑入滑出

•  $("div").fadeIn(1000);//淡入

•  $("div").fadeOut(1000);//淡出

•  $("div").fadeToggle(1000);//切换淡入淡出

//可以设置透明度,参数1:时间,参数2:到达透明度

 $(“div”).fadeTo(1000,0.3);//一个参数,常用

 //参数1:没有时间,参数2:到达透明度 

//和css("opacity",0.1);

 $("div").fadeTo(0,0.1);//一个参数

动画方法:animate方法

$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {

 $("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000); 

});

第一个参数:键值对(数值的属性可以改,颜色不能改) 

第二个参数:动画的时间 

第三个参数:回调函数

停止动画效果:stop()方法

解决下拉框案例中的bug

$(".wrap>ul>li").mouseover(function () {

     $(this).children("ul").stop().show(500);//显示ul 

}); 

$(".wrap>ul>li").mouseout(function () { 

    $(this).children("ul").stop().hide(500);//显示ul 

});