學習筆記專區

    <script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/jquery-ui.min.js"></script>

    <script>

       $(function() {

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

//            $('#div1').hide(1500,function(){

//                $('#div1').show(1500);})

//            $("指定使用方法的標籤")hide.(效果持續毫秒數,function(){隱藏動作完成後要進行的程式})

              //練習一 show(),hide(),toggle()

              //1. 使用兩秒鐘的時間隱藏(hide)div1元素

              //2. 完成之後再用兩秒鐘的時間顯示(show)div1元素

              //3. 瀏覽網頁看看效果

              //4. 注解上面所寫的程式

              //5. 使用toggle方法顯示及隱藏div1元素 

//            $('#div1').hide('explode',2000,function(){

//                $('#div1').show('shake',1500);

//            });

//            這個↑↓特效需要加入src=js/jquery-ui.min.js 方能使用

              $('#div1').toggle('explode',1500);

              //toggle像是按鈕，如果在a狀態，觸發時改成B；如果在B狀態，觸發時改成A

              //上面這行就是如果圖片有顯示，觸發(click)後隱藏。如果圖片隱藏，觸發後顯示

           });

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

//            $('#div1').slideUp(1500,function(){

//                $('#div1').slideDown(1500);})

              //練習二 slideUp(),slideDown(),slideToggle()

              //1. 使用兩秒鐘的時間讓div1元素向上(slideUp)隱藏

              //2. 完成之後再用兩秒鐘的時間讓div1元素向下(slideDown)顯示

              //3. 瀏覽網頁看看效果

              //4. 注解上面所寫的程式

              //5. 使用slideToggle方法,讓div1元素向上隱藏及向上顯示

                  $('#div1').slideToggle(1500);

           });

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

//            $('#div1').fadeOut(1500,function(){

//                $('#div1').fadeIn(1500);})

              //練習三 fadeIn(),fadeOut(),fadeToggle()

              //1. 使用兩秒鐘的時間讓div1元素淡出(fadeOut)隱藏

              //2. 完成之後再用兩秒鐘的時間讓div1元素淡入(fadeIn)顯示

              //3. 瀏覽網頁看看效果

              //4. 注解上面所寫的程式

              //5. 使用fadeToggle方法,讓div1元素淡出隱藏及淡入顯示

                  $('#div1').fadeToggle(1500);

           });

           //練習四：fadeTo(可以指定透明度)

           //1. 先將img1圖片不透明度的樣式設定成0.3(opacity:0.3)

           //2. 瀏覽網頁img1圖片看起來是比較透明的

           //3. 滑鼠移到img1圖片後,使用1.5秒的時間,讓此圖片的不透明度回到1

           //4. 滑鼠離開img1圖片後,再使用1.5秒的時間,讓此圖片的不透明度回到0.3

           $('#img1').hover(function(){

              $(this).fadeTo(1000,1);

           },function(){

              $(this).fadeTo(1000,0.3);

           })

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

              //練習五 animate()

              //使用者點選alligator的圖片後,使用5秒鐘的時間完成下列動作

              //向右移動到200px的位置(left:200)

              //向上移動到0px的位置(top:0)

              //不透明度調整成0.3(opacity:0.3)

               //寬度調整成200px(width:200)

              //瀏覽網頁看看效果

              $(this).animate({

                  "left":"100px",//往左走

                  "width":"20px",//越走越小

                  "opacity":"0.1",//越走越透明

                  "top":"0px"//往上走

              },5000,"easeInOutBounce")

              //其中easeInOutBounce需要引入< script src="js/jquery-ui.min.js"><script

              //效果參照http://jqueryui.com/easing/ 網頁

           });

       });

    </script>