專注Java教育13年 全國咨詢/投訴熱線:400-8080-105

          首頁 hot資訊 jQuery特效大全:在動畫中添加效果

          jQuery特效大全:在動畫中添加效果

          更新時間:2022-04-15 09:10 來源:動力節點 瀏覽35次

          下面動力節點小編為大家介紹幾種jQuery動畫效果的方法,具體如下:

          1.show()顯示效果

          語法:show(speed,callback)  Number/String,Function speend為動畫執行時間,單位為毫秒。也可以為slow","normal","fast" callback可選,為當動畫完成時執行的函數。

          show(speed,[easing],callback)  Number/String  easing默認是swing,可選linear;

          $("#div1").show(3000,function(){ alert("動畫顯示完成!"); });  

          2.hide()隱藏效果

          語法:hide(speed,callback)  Number/String,Function

          hide(speed,easing,callback)  Number/String

          $("#div1").hide(3000,function(){ alert("動畫隱藏完成") });

          3.toggle()隱藏顯示自動切換,當目前為顯示則隱藏,當目前為隱藏則顯示

          語法:toggle(speed,callback)  Number/String,Function

          toggle(speed,callback)  Number/String,String,Function

          $("#div1").toggle(3000,function(){ alert("動畫效果切換完成") });

          4.slideDown()向下顯示,slow()是水平與垂直方向同時展開,而slideDown是僅僅在垂直方向向下展開

          語法:slideDown(speed,callback)  Number/String,Function

          slideDown(speed,[easing],callback)  Number/String,Function

          $("#div1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });

          5.slideUp()向上隱藏, hide()是水平與垂直兩個方向的,而slideUp()僅僅是垂直方向向上收起隱藏

          語法:slideUp(speed,callback)  Number/String,Function

          slideUp(speed,[easing],callback)  Number/String,String,Function

          $("#div1").slideUp(3000,function(){ alert("向上收起隱藏成功!"); })

          6.slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的,而slideToggle是僅僅垂直方向的。

          語法:slideToggle(speed,callback)  Number/String,Function

          slideToggle(speed,[easing],callback)  Number/String,String,Function

          $("#div1").slideToggle(3000,function(){ alert("水平方向上切換成功"); });

          7.fadeIn() 以改變透明度來顯示

          語法:fadeIn(speed,callback)    Number/String,Function

          fadeIn(speed,[easing],callback)  Number/String,Function

          $("#div1").FadeIn(3000,function(){ alert("淡入顯示成功!"); });

          8.fadeOut() 以改變透明度來隱藏

          語法:fadeOut(speed,callback)   Number/String,Function

          fadeOut(speed,[easing],callcack)   Number/String,String,Function

          $("#div1").fadeOut(3000,function(){ alert("淡出隱藏成功!"); });

          9.fadeToggle() 以改變透明度來切換顯示隱藏狀態

          語法: fadeToggle(speed,callback)  Number/String,Function

          fadeToggle(speed,[easing],callback)    Number/String,Function

          $("#div1").fadeToggle(3000,function(){ alert("淡入淡出切換成功!"); });

          10.fadeTo() 由指定的時間將透明度改變到指定的透明度

          語法:fadeTo(speed,callback)    Number/String,Function

          fadeTo([speed],opacity,[easing],[fn])  Number/String,Float,String,Function

          $("#div1").fadeTo(3000,0.22,function(){ alert("透明度改變成功!"); });

          11.animate() 自定義動畫,一般來說數字變動都可以用于動畫。

          語法:animate(params,speed,easing,callback);  樣式參數,時間,可選擇,函數

          $("#div1").animate({ width:300px,height,300px },3000);

          其中params要用中括號括起來,可以使用的css樣式參數。注意要采用駱駝法則,如font-size要寫成fontSize。顏色漸變不支持。

          backgroundPosition

          borderWidth

          borderBottomWidth

          borderLeftWidth

          borderRightWidth

          borderTopWidth

          borderSpacing

          margin

          marginBottom

          marginLeft

          marginRight

          marginTop

          outlineWidth

          padding

          paddingBottom

          paddingLeft

          paddingRight

          paddingTop

          height

          width

          maxHeight

          maxWidth

          minHeight

          maxWidth

          font

          fontSize

          bottom

          left

          right

          top

          letterSpacing

          wordSpacing

          lineHeight

          textIndent

          12.stop() 停止正在執行動畫

          stop([clearQueue],[gotoEnd]);  兩個參數均為布爾值,第一個表示,是否停止動畫執行、第二個表示,如果停止,是否立即變為執行完成的狀態,如果設置為否,則停留在執行一半的狀態。

          $("#div1").hide(5000)  //此動畫正在執行
            $("#div1").stop();    //上一行代碼指定的動畫停止在一半狀態 
            $("#div1").stop(true,true);  //停止當前動畫,同時動畫切換到完成執行狀態。

          13.delay() 延遲執行動畫  

          當一個動畫stop()了之后還能夠用delay()來延遲執行。從停止位置繼續執行。當然用原來的方法繼續執行也不可,不過沒有延時效果。

          delay(duration,[queueName])  設置一個延遲值來執行動畫  Integer,String
            $("#div1").delay(3000).hide(3000);  //表示在3000毫秒后執行hide(3000);

          14.jQuery.fx.off//該屬性只是是否關閉當前頁面上的動畫,關閉動畫之后,沒有動畫效果,所有設置了執行時間的動畫會瞬間完成。

          注意此屬性出現的位置。出現的位置不同影響的范圍也不同。

          $(function(){ 
              jQuery.fx.off = true;  //屬性在事件外面,對頁面加載后執行的所有動畫有效 
              $("#div1").click(function(){  //屬性如果寫在這里,僅僅對當前點擊事件無效,不影響其他事件的動畫 
                $("#div1").hide(3000);  //注意由于jQuery.fx.off設置為了true,因此3000毫秒失效,相當于hide(); 
               }); 
            })

          15.jQuery.fx.interval  

          //該屬性設置動畫的幀速,單位是毫秒,如果設置的時間越小,就越平滑。,屬性出現的位置同樣有影響范圍

          $(function(){ 
            jQuery.fx.interval = 1000; 
            $("#div1").click(function(){   
              $("#div1").hide(3000);   //jQuery.fx.interval設置為1000,也就是1秒鐘,改變一次效果?!?
             }); 
           })

          以上就是關于“jQuery特效大全:在動畫中添加效果”的介紹,大家如果想了解更多相關知識,不妨來關注一下動力節點的jQuery教程,里面的課程內容細致全面,通俗易懂,適合小白學習,希望對大家能夠有所幫助哦。

          提交申請后,顧問老師會電話與您溝通安排學習

          免費課程推薦 >>
          技術文檔推薦 >>

          返回頂部
          自拍亚洲一区欧美另类 日韩~欧美一中文字幕| 姐姐的朋3线观高清| 男女做暧暧18禁止试看| 又色又爽的无遮挡免费视频| 爆乳放荡的女教师bd| 西西大胆午夜人体视频无码| 被老头添奶头和下面好爽| 人妻少妇精品无码专区| 看全色黄大色大片免费久久| 又黄又好看乡村小说| 顶级少妇a级毛片| free18中国| 日韩人妻无码精品专区| 女邻居丰满的奶水完整版| 天天影视色香欲综合网网站86| 青青河边草新视频免费观看| 强被迫伦姧在线观看无码| 欧美情侣性视频| 1v1高肉养成| 国产精品日韩专区第一页| 日韩欧美亚洲综合久久| 老师穿旗袍白丝让我爽翻天av| tude8| 国产老熟女狂叫对白| 夜夜澡人摸人人添| 亚洲制服丝袜精品久久| 旧里番扶肉人妻寝取| 欧美大片在线观看完整版| 美女的小泬泬流爱液视频| 4hu四虎最新地址 884aa| 国产白袜男gaychina白袜男生| http://www.ianlowry.com