摘要：jqery的動(dòng)畫效果一. jqery的顯示與隱藏hide()隱藏顯示的元素書寫格式：hide([speed][sesing][function])show()顯示隱藏的元素書寫格式：hide([show][sesing][function])speed:隱藏過程的速度(值：毫秒值)sesing:指定切換的效果function:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)ex;   &nb

jqery的動(dòng)畫效果
一. jqery的顯示與隱藏

hide()隱藏顯示的元素
書寫格式：hide([speed][sesing][function])

show()顯示隱藏的元素
書寫格式：hide([show][sesing][function])

speed:隱藏過程的速度(值：毫秒值)
sesing:指定切換的效果
function:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)

ex;
     $(document).ready(function(){
          $('#bt1').click(function(){
              $('p').hide(1500)
          })
          $('#bt2').click(function(){
              $('p').show(1500)
      })
   })

二 .jquery的滑動(dòng)

jquery的滑動(dòng)是通過高度的變化（向某個(gè)方向增大或者縮小）來動(dòng)態(tài)顯示所匹配的元素
slideDown（[speed][fn]）通過高度的變化，向下增大動(dòng)態(tài)效果，下滑效果（值：slow,fast,毫秒值）
speed:下滑顯示過程的速度 英文值或者毫秒
fn:動(dòng)畫完成時(shí)執(zhí)行是函數(shù)

slideUp([speed][fn])通過高度的變化，想上減小的動(dòng)態(tài)效果，上滑效果
speed:上滑顯示過程的速度 英文值或者毫秒
fn:動(dòng)畫完成時(shí)執(zhí)行是函數(shù)

slideToggle([speed][fn])過過高度的變化來切換元素的可見性
speed:上滑隱藏/下滑顯示 過程的速度 英文值或者毫秒
fn:動(dòng)畫完成時(shí)執(zhí)行是函數(shù)

ex;
$(document).ready(function(){
    $('.p1').hide()
    $('.bt1').click(function(){
        $('.p1').slideDown()
    })
     $('.bt2').click(function(){
        $('.p2').slideUp()
    })
    $('.bt3').click(function(){
        $('.p3').slideToggle(1000)
    })
})

三 .jquery-淡入淡出
jquery是通過控制不透明度的變化來控制匹配到的元素的淡入淡出效果
fadeIn([speed][fn])通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡入效果
fadeOut([speed][fn])通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡出的效果
fadeToggle([speed][fn])通過不透明度的變化來開關(guān)所有匹配元素的淡入淡出效果
fadeTo([speed]opacity[fn])把所有匹配到元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度
speed:規(guī)定效果時(shí)長(zhǎng)
fn:動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
opacity:fadeTo()方法中必須參數(shù)，控制淡入淡出的效果的不透明度（值介於0與1之間）

ex;
$(document).ready(function(){
    $('.box1').hide()
    $('.bt1').click(function(){
        $('.box1').fadeIn(3000)
    })
    $('.bt2').click(function(){
        $('.box2').fadeOut()
    })
    $('.bt3').click(function(){
        $('.box3').fadeToggle(1500)
    })
     $('.bt4').click(function(){
    $('.box4').fadeTo(1000,0.3)//必須要兩個(gè)值
    })
})

四 .jquery-自定義動(dòng)畫

jquery中我們使用animate()方法創(chuàng)建自定義的動(dòng)畫
語法:$(selector).animate({params},speed,fn);
必須的 params 參數(shù)定義形成動(dòng)畫的css屬性
可選的speed參數(shù)規(guī)定效果的時(shí)長(zhǎng)，它可以取以下值:slow,fast或毫秒值
可選的fn是動(dòng)畫完成後所執(zhí)行的函數(shù)
stop()方法用於停止動(dòng)畫或效果，在他們完成前，該方法用於所有jquery效果函數(shù)，他包含滑動(dòng)，淡入淡出和自定義動(dòng)畫
語法：$(selector).stop(stopAll,goToend)
可選的參數(shù)stopAll規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列，默認(rèn)是false僅停止活動(dòng)的動(dòng)畫，允許任何排入排列的動(dòng)畫后執(zhí)行
可選的參數(shù)goToEnd規(guī)定是否完成當(dāng)前動(dòng)畫，默認(rèn)是flase
默認(rèn)情況下stop()會(huì)清除再被選元素上指定的當(dāng)前動(dòng)畫

ex;$(document).ready(function(){
    $('.bt1').click(function(){
        $('p').animate({fontSize: '400px'},1500)
       
    })
    同時(shí)操作多個(gè)css屬性.
    使用預(yù)定義的值show,hide,toggle
    $('.bt2').click(function(){
        $('div').animate({
            left: '400px',//如果想對(duì)元素位置進(jìn)行一個(gè)位移，那麼我們需要給當(dāng)前元素設(shè)置一個(gè)position ，例如：position:absolute;
            opacity: '0.3',
            height: '500px',
            width: '500px'
             width:'toggle'
           
         },1500)
    })
 })
注:font-size,要使用駝峰寫法fontSize

五 .jquery-停止動(dòng)畫
stop()方法用於停止動(dòng)畫或效果，在他們完成前，該方法適用於所有jquery效果函數(shù)，包括滑動(dòng)，淡入淡出和自定義動(dòng)畫
語法：
$(seleector).stop(stopAll,goToEnd)
可選的參數(shù)stopAll規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列，默認(rèn)是false僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向後執(zhí)行
可選的參數(shù)goToEnd規(guī)定是否立即完成當(dāng)前的動(dòng)畫，默認(rèn)是false
默認(rèn)情況下stop()會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
ex;
   $(document).ready(function(){
       $('#right').click(function(){
           $('.box1').animate({left : '+500px'},3000)
           $('.box1').animate({fontSize:'300px'},500)
       })
         $('#stop').click(function(){
           $('.box1').stop(true)
       })
      
   })

批改老師：西門大官人批改時(shí)間：2019-04-22 10:00:10
老師總結(jié)：總結(jié)的很好，寫的很認(rèn)真。最好在js代碼后面加上分號(hào)。規(guī)范些