jQuery基礎(chǔ)效果

十年專注成都網(wǎng)站制作，成都企業(yè)網(wǎng)站建設(shè)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁(yè)制作,對(duì)成都PVC花箱等多個(gè)方面，擁有豐富設(shè)計(jì)經(jīng)驗(yàn)。

$(document).ready(function(){}這句話的意思是頁(yè)面加載完成后執(zhí)行，

等同于js中的window.onload，大家學(xué)了jQuery的話應(yīng)該就會(huì)知道

$(document).ready(function(){//這行代碼意思是頁(yè)面加載后執(zhí)行

           $("#bun1").click(function(){//#是ID的意思  .是Class的意思   $("#bun1")選擇你需要用到的元素，這句話的意思是我要給一個(gè)ID為bun1的元素加點(diǎn)擊事件

           $(".h21").hide('fast')//一樣$(".h21")選擇元素，選Class名為11的元素

          })

解釋完了，jQuery就是這么簡(jiǎn)單

現(xiàn)在來(lái)學(xué)習(xí)基礎(chǔ)效果

1隱藏和顯示

隱藏的代碼是hide（speed，function）

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

顯示的是代碼show（speed，function）

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

如果你要弄隱藏和顯示的效果，你需要2個(gè)按鈕一個(gè)隱藏，一個(gè)顯示，有個(gè)代碼可以讓你給一個(gè)按鈕施加2個(gè)效果，既可以隱藏也可以顯示，那就是

toggle(speed，function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

代碼如下

$(document).ready(function(){

           $('#bun1').click(function(){

            //$('#div1').hide(2000)//隱藏 隱藏的速度是2秒完成

             // $('#div1').show(2000)//顯示 顯示的速度為2秒完成

            $('#div1').toggle(2000)//既可以隱藏也可以顯示

           })

        })

2淡入淡出

淡入隱藏的元素（把元素隱藏的給淡入出來(lái)，可以給人看到）

fadeIn(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

淡出顯示的元素（把元素淡出，隱藏起來(lái)，我總是容易弄混）

fadeout(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

既可以淡入又可以淡出

fadeToggle(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

給淡入淡出的元素設(shè)置透明度

fadeTo(speed,opacity,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第三個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù) opacity是必須的參數(shù)（值為0-1之間）

代碼如下

$(document).ready(function(){

           $('#bun1').click(function(){

            //$('#div1').fadeOut(2000)//淡出

             //$('#div1').fadeIn(2000)//淡入

             //$('#div1').fadeToggle(2000)既可以淡入又可以淡出

             $('#div1').fadeTo(2000,0.2)

           })

        })

3滑動(dòng)

向下滑動(dòng)

slideDown(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

向上滑動(dòng)

slideUp(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

既能向上又能向下

slideToggle(speed,function)

第一個(gè)參數(shù)可以是 毫秒 slow fast  第二個(gè)參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

代碼如下

$(document).ready(function(){

           $('#bun1').click(function(){

            //$('#div1').slideDown(2000)//向下滑動(dòng)隱藏到消失

             //$('#div1').slideUp(2000)//向上滑動(dòng)隱藏到消失

            $('#div1').slideToggle(2000)//既可以向上又可以向下

           })

        })

4動(dòng)畫(huà)

animate({params},speed,function)用于創(chuàng)建自定義動(dòng)畫(huà)

參數(shù)params必選 為形成動(dòng)畫(huà)的css屬性

speed參數(shù)可以是 毫秒 slow  fast   function參數(shù)，就是完成隱藏后執(zhí)行的函數(shù)

$(document).ready(function(){

           $('#bun1').click(function(){

$('#div1').animate({height:'200px',width:'200px'},2000)

           })

        })

Animate({})里面寫(xiě)多個(gè)css樣式會(huì)同時(shí)執(zhí)行

如果這樣寫(xiě)，就會(huì)排隊(duì)執(zhí)行，先執(zhí)行第一個(gè)，然后第二個(gè)，接著第三個(gè)，依次執(zhí)行

$('#div1').animate({height:'200px'},2000)

$('#div1').animate({width:'200px'},2000)

還有一種寫(xiě)法是在原本的寬度上架200像素 使用+=，具體的其他用法，遇到才知道

$('#div1').animate({height:'+=200px'},2000)

stop(stopALL，goToEnd)用來(lái)停止動(dòng)畫(huà)

stopAll參數(shù)是否清除動(dòng)畫(huà)隊(duì)列，默認(rèn)是false，是停止當(dāng)前動(dòng)畫(huà)，執(zhí)行隊(duì)列中的下一個(gè)動(dòng)畫(huà)

goToEnd參數(shù)是否立即完成當(dāng)前動(dòng)畫(huà)，默認(rèn)是false

因此stop（）不加參數(shù)的用法是清楚當(dāng)前動(dòng)畫(huà)，執(zhí)行隊(duì)列中的下一個(gè)，具體用法，根據(jù)實(shí)際應(yīng)用了

5 chaining技術(shù)的作用：能把動(dòng)作/方法鏈接起來(lái)。

只需要再動(dòng)畫(huà)之后加.就可以鏈接起來(lái)

$(document).ready(function(){

           $('#bun1').click(function(){

               $('#div1').animate({height:'+=200px'},2000).css('background','yellow').animate({width:'+=100px'},2000)            

           })

        })