jQuery Effects – Hiệu ứng trong jQuery

Một website để đẹp mắt và mượt mà hơn cần tới các hiệu ứng chuyển động. jQuery Effects cho phép bạn sử dụng một vài hiệu ứng để trang web hấp dẫn, ấn tượng hơn. Bài viết này chúng ta sẽ đi tìm hiểu về các hiệu ứng trong jQuery.

Hiệu ứng hide(), show() và toggle()

Phương thức hide() sẽ ẩn phần tử HTML đi.
Còn với show() sẽ hiện ra.

Cú pháp:

$("p").hide(500);
$("p").show(500);

500: là thời gian của chuyển động, bạn có thể tùy chỉnh

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $("#hide").click(function(){
    $("p").hide(500);
  });
  $("#show").click(function(){
    $("p").show(500);
  });
});
</script>
</head>
<body>

<button id="hide">Hide</button>
<button id="show">Show</button>

<p>Dòng chữ này sẽ ẩn và hiện</p>

</body>
</html>

Phương thức toggle là sự luôn phiên giữa giữa hide() và show()

Ví dụ:

jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").toggle();
  });
});

Hiệu ứng Fade trong jQuery

Face trong jQuery sẽ làm mờ phần tử bao gồm:

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

Phương thức jQuery fadeIn()

Cú pháp:

$(selector).fadeIn(speed,callback);

Trong đó:

selector: bộ chọn
speed: tốc độ

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<button>Nhấp vào đây</button><br><br>

<div id="div1" style="width:100px;height:100px;display:none;background-color:#ef2424;"></div><br>
<div id="div2" style="width:100px;height:100px;display:none;background-color:#00c100;"></div><br>
<div id="div3" style="width:100px;height:100px;display:none;background-color:#87079d;"></div>

</body>
</html>

Sau khi nhấp chuột bạn sẽ so sánh được sự khác nhau của việc đặt thông số speed.

Phương thức jQuery fadeOut()

Ví dụ:

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

Phương thức jQuery fadeToggle()

fadeToggle()Phương thức jQuery chuyển đổi giữa các phương thức fadeIn()và fadeOut().

Cú pháp:

$(selector).fadeToggle(speed,callback);

Cũng với ví dụ trên bạn hãy thay bằng đoạn mã sau:

jQuery(document).ready(function($){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});

Hiệu ứng Slide jQuery

Tạo hiệu ứng chuyển động mượt mà lên xuống cho phần tử.

Sẽ bao gồm các phương thức:

slideDown()
slideUp()
slideToggle()

Hãy thử ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
jQuery(document).ready(function($){
  $("#flip").click(function(){
    $("#panel").slideDown("500");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: green;
  color: #fff;
  border: solid 1px #fff;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click để hiển thị phần tử</div>
<div id="panel">Xin chào các bạn!</div>

</body>
</html>

Thay lần lượt

$("#panel").slideDown("500");

Bằng .slideUp() và .slideToggle() để xem sự khác biệt.

Hiệu ứng Animate() trong jQuery

Animate là hiệu ứng chuyển động cho một phần tử HTML.

Đọc lại bài viết tại Animate() trong jQuery và các ví dụ cụ thể

Kết luận: Vậy là chúng ta đã cùng nhau điểm qua các hiệu ứng trong jQuery rồi. Chúng khá cần thiết khi làm các dự án website của bạn. Chính vì vậy bạn cần tìm hiểu kỹ về chúng nhé.