一聚教程網︰一個值得你收藏的教程網站

最新下載

秒速赛车-秒速赛车官方网站「秒速赛车开奖查询」-「平安彩票网」

時間︰2019-04-11 17:24:41 編輯︰豬哥 來源︰轉載

1.jQuery動畫效果,隱藏和顯示。

兩個方法︰hide()"隱藏"      show()"顯示"

JQuery動畫效果,隱藏和顯示

<script> $(document).ready(function(){ $("#button1").click(function(){ $("p").hide(); }) $("#button2").click(function() { $("p").hide(); }) }) </script>

語法︰$(selector).hide(speed.callback)
語法︰$(selector).show(speed.callback)
callback參數︰是隱藏或顯示完成後執行的函數名稱。

$(document).ready(function(){
   $("#button1").click(function(){
    $("p").hide(500);
    alert("恭喜你,顯示完成")
   })
   $("#button2").click(function() {
    $("p").show(200,function(){
     alert("恭喜你,顯示完成")
    })
   }

語法︰$(selector).toggle(speed.callback)
speed參數規定參數隱藏和顯示的速度,取值為"show""fast".毫秒(1秒等于1000毫秒)
callback參數︰是隱藏或顯示完成後執行的函數名稱。

$("#button3").click(function() {
     $("p").toggle(1000,function(){
     $("p").css({color:"yellow"})
     })

2.Jquery滑動和動畫
兩個方法︰slideDow()       toggleDoe()      

      <kbd id='xvflq'></kbd><address id='mtknh'><style id='svcud'></style></address><button id='tulsn'></button>

          點擊我,滑動顯示或者隱藏面板 Hello JQuery
          <script> $(document).ready(function(){ $("#slide").click(function(){ $("#panel").slideToggle() }) }) </script>

          3.JQuery動畫效果,動畫
          animate()方法用于創建自定義的動畫。

           語法︰
          $(selector),animate({params},speed,callback)
          必須的params參數定義形成動畫的css屬性

              <kbd id='ktgsf'></kbd><address id='bdjce'><style id='hhdgv'></style></address><button id='dwnsv'></button>

                  默認情況下所有的HTML元素有一個靜態的位置,且是不可能移動的,如果需要改變,那麼須將元素的position屬性設置為absolute,relative,fixed

                  <script> $(document).ready(function() { $("button").click(function () { $("div").animate({left:"200px"},1000,function(){ $("div").css({background:"yellow"}) }) }) }) </script>

                  4.操作多個屬性︰

                  animate();使用相對值 

                      <kbd id='wyvcz'></kbd><address id='wugjn'><style id='lbjmm'></style></address><button id='nxoot'></button>

                          <script> $(document).ready(function(){ $("#slide").click(function() { $("div").animate({ left:"200px",opacity:"0.5",height:"160px",width:"160px" }) }) }) </script>

                          文章評論

                          熱門欄目