jQuery: Hiệu ứng Fading

Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Fading bạn có thể hiểu nôm na là bạn có thể làm cho một đối tượng nào đó ẩn đi hoặc hiện ra nhưng không tức thì.

Các phương thức Fading bao gồm:

Ø  fadeIn()

Ø  fadeOut()

Ø  fadeToggle()

Ø  fadeTo()

Phương thức fadeIn()

Phương thức này dùng để dần hiển thị đối tượng đang ẩn.

Cú pháp:

$(Bộ_chọn).fadeIn(Tốc_độ, callback);

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis. com/ajax/libs/jquery/1.11.0 /jquery.min.js">
  </script>
  <script>
  $(function(){
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });
  });
  </script>
</head>

<body>
  <button>Click => Dần hiện</button>
  <br><br>
  <div id="div1" style="width:80px; height:80px; display:none; background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px; height:80px; display:none; background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px; height:80px; display:none; background-color:blue;"></div>
</body>
</html>

Demo

Phương thức fadeOut()

Phương thức này dùng để dần ẩn đi đối tượng đang hiện.

Cú pháp:

$(Bộ_chọn).fadeOut(Tốc_độ, callback);

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis. com/ajax/libs/jquery/1.10.2 /jquery.min.js"></script>
  <script>
    $(function(){
      $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut(1500);
        $("#div3").fadeOut(3000);
      });
    });
  </script>
</head>

<body>
  <button>Click => Dần ẩn</button>
  <br><br>
  <div id="div1" style="width:80px; height:80px; background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px; height:80px; background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px; height:80px; background-color:blue;"></div>
</body>
</html>

Demo

Phương thức fadeToggle()

Phương thức này sẽ làm cho một đối tượng dần hiện ra hoặc dần ẩn đi, có thể nói đây là sự kết hợp của cả hai phương thức là fadeIn() và fadeout().

Cú pháp:

$(Bộ_chọn).fadeToggle(Tốc_độ, callback);

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis. com/ajax/libs/jquery/1.10.2 /jquery.min.js"></script>
  <script>
  $(function(){
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });
  });
  </script>
</head>

<body>
  <button>Click => Dần ẩn + Dần hiện</button>
  <br><br>
  <div id="div1" style="width:80px; height:80px; background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px; height:80px; background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px; height:80px; background-color:blue;"></div>
</body>
</html>

Demo

Phương thức fadeTo()

Phương thức này dùng để làm mờ đối tượng đang hiện đến một độ mờ nào đó.

Cú pháp:

$(Bộ_chọn).fadeTo(Tốc_độ, Độ_mờ, callback);

,trong đó Độ_mờ là một giá trị nằm trong đoạn [0,1], cụ thể nếu Độ_mờ=0 thì đối tượng sẽ mờ hẳn (ẩn đi), nếu Độ_mờ=1 thì đối tượng không bị mờ.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis. com/ajax/libs/jquery/1.10.2 /jquery.min.js"></script>
  <script>
    $(function(){
      $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
      });
    });
  </script>
</head>
<body>
  <button>Click => Mờ đi</button>
  <br><br>
  <div id="div1" style="width:80px; height:80px; background-color:red; visibility:visible;"></div>
  <br>
  <div id="div2" style="width:80px; height:80px; background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px; height:80px; background-color:blue;"></div>
</body>
</html>

Demo

» Tiếp: Hiệu ứng Slide
« Trước: Hide & Show
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!