jQuery效果之隱藏與顯示、淡入淡出、滑動、回調

  • jQuery 隱藏與顯示
  • jQuery 淡入淡出
  • jQuery 滑動
  • jQuery 動畫
  • jQuery 停止動畫
  • jQuery Callback
  • jQuery Chaining

jQuery 隱藏與顯示

兩個簡單的很炫效果:

隱藏與顯示動畫1.gif

代碼:

<p>你好嗎</p>
  <button id="hide">隱藏</button>
  <button id="show">顯示</button>
  <button id="toggle">隱藏/顯示</button>
$(document).ready(function () {
   $("#hide").click(function () {
       $("p").hide(1000);
   }) ;
   $("#show").click(function () {
       $("p").show(1000);//1000毫秒
   }) ;
   $("#toggle").click(function () {
       $("p").toggle(1000);//同時控制顯示與隱藏
   }) ;
});
隱藏與顯示動畫2.gif

代碼:

<body>
  <p>你好嗎</p>
 </button>-->
<script>
    for(var i = 0 ; i <5;i++){
        $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
       $(this).hide(2000,function () {
           $(this).remove();//隱藏后移除掉div
       });
    });
</script>

jQuery 淡入淡出

首先看效果圖:

淡入淡出效果.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="fadeInOut.js"></script>
</head>
<body>
    <button id="in">淡入</button>
    <button id="out">淡出</button>
    <button id="toggle">淡入/淡出</button>
    <button id="to">fadeto</button>
    <div id="div1" style="display: none; width: 80px;height: 80px;background-color: aqua"></div>
    <div id="div2" style="display: none; width: 80px;height: 80px;background-color: sienna"></div>
    <div id="div3" style="display: none; width: 80px;height: 80px;background-color: fuchsia"></div>
</body>
</html>
/**
 * Created by chuanglong02 on 17/1/24.
 */
$(document).ready(function () {
    $("#in").click(function () {
       $("#div1").fadeIn(1000);
       $("#div2").fadeIn(1000);
       $("#div3").fadeIn(1000);
    });
    $("#out").click(function () {
       $("#div1").fadeOut(1000);
       $("#div2").fadeOut(1000);
       $("#div3").fadeOut(1000);
    });
    $("#toggle").click(function () {
       $("#div1").fadeToggle(1000);
       $("#div2").fadeToggle(1000);
       $("#div3").fadeToggle(1000);
    });
    $("#to").click(function () {
       $("#div1").fadeTo(1000,1);
       $("#div2").fadeTo(1000,0.75);
       $("#div3").fadeTo(1000,0.3);//設置透明度
    });

});

jQuery 滑動 ,和上面顯示隱藏是一樣的

效果圖:

滑動顯示與隱藏.gif

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="slide.js"></script>
    <style>
        #flipshow,#content,#fliphide,#flip{
            padding: 5px;
            text-align: center;
            background-color: #ece023;
            border: 1px solid red;
        }
        #content{
            padding: 50px;
            display: none;
        }

    </style>
</head>
<body>
    <div id="flipshow">顯示</div>
    <div id="fliphide">隱藏</div>
    <div id="flip">顯示/隱藏</div>
    <div id="content">helloword</div>

</body>
</html>
$(document).ready(function () {
   $("#flipshow").click(function () {
       $("#content").slideDown(1000);
   });
   $("#fliphide").click(function () {
       $("#content").slideUp(1000);
   });
   $("#flip").click(function () {
       $("#content").slideToggle(1000);
   });
});

回調 callback

動畫在結束后都有個回調,可以執行一個或者多個方法:
效果圖:

動畫回調.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="callbakc.js"></script>
</head>
<body>
    <button>隱藏</button>
    <p>hello Worldhello Worldhello World</p>
</body>
</html>
$(document).ready(function () {
  $("button").click(function () {
      $("p").hide(1000,function () {
          // $("p").show(); //回調 ,動畫執行之后的回調
          $("p").css("color","red").slideUp(1000).slideDown(1000);
      });
  });
});
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 669評論 0 3
  • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。...
    阿r阿r閱讀 1,164評論 0 4
  • 隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性。但是通過css...
    老夫撩發少年狂閱讀 1,104評論 0 2
  • (續jQuery基礎(2)) 四、動畫篇 第1章 動畫基礎隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
    凜0_0閱讀 462評論 0 6
  • 邁克爾.米哈兒科 《米哈爾科商業創意全攻略》,講的是創造性思維以及如何解決問題。他提到的創造性思維技巧中的一個“假...
    盛夏的陽光閱讀 1,030評論 0 2