jQuery: Hiệu ứng Fading

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!