jQuery基礎效果

jQuery基礎效果

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

等同于js中的window.onload，大家學了jQuery的話應該就會知道

$(document).ready(function(){//這行代碼意思是頁面加載後執行

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

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

           })

解釋完了，jQuery就是這麼簡單

現在來學習基礎效果

1隐藏和顯示

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

第一個參數可以是 毫秒 slow fast   第二個參數，就是完成隐藏後執行的函數

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

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

toggle(speed，function)

代碼如下

$(document).ready(function(){

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

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

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

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

        })

2淡入淡出

淡入隐藏的元素（把元素隐藏的給淡入出來，可以給人看到）

fadeIn(speed,function)

淡出顯示的元素（把元素淡出，隐藏起來，我總是容易弄混）

fadeout(speed,function)

既可以淡入又可以淡出

fadeToggle(speed,function)

給淡入淡出的元素設定透明度

fadeTo(speed,opacity,function)

第一個參數可以是 毫秒 slow fast   第三個參數，就是完成隐藏後執行的函數 opacity是必須的參數（值為0-1之間）

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

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

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

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

           })

3滑動

向下滑動

slideDown(speed,function)

向上滑動

slideUp(speed,function)

既能向上又能向下

slideToggle(speed,function)

             //$('#div1').slideDown(2000)//向下滑動隐藏到消失

             //$('#div1').slideUp(2000)//向上滑動隐藏到消失

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

4動畫

animate({params},speed,function)用于建立自定義動畫

參數params必選 為形成動畫的css屬性

speed參數可以是 毫秒 slow  fast   function參數，就是完成隐藏後執行的函數

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

Animate({})裡面寫多個css樣式會同時執行

如果這樣寫，就會排隊執行，先執行第一個，然後第二個，接着第三個，依次執行

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

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

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

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

stop(stopALL，goToEnd)用來停止動畫

stopAll參數是否清除動畫隊列，預設是false，是停止目前動畫，執行隊列中的下一個動畫

goToEnd參數是否立即完成目前動畫，預設是false

是以stop（）不加參數的用法是清楚目前動畫，執行隊列中的下一個，具體用法，根據實際應用了

5 chaining技術的作用：能把動作/方法連結起來。

隻需要再動畫之後加.就可以連結起來

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

本文轉自

新網學會 51CTO部落格，原文連結：http://blog.51cto.com/xwxhvip/2049405 ，如需轉載請自行聯系原作者