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é.

Related Posts

Cấu trúc dữ liệu và giải thuật: Một cái nhìn tổng quan

Giới thiệu Trong lĩnh vực phát triển phần mềm, cấu trúc dữ liệu và giải thuật là hai khái niệm quan trọng không thể thiếu. Cấu trúc…

Next.js – Khám phá Framework JavaScript tuyệt vời cho phát triển ứng dụng web

Giới thiệu về Next.js Next.js là một framework JavaScript mã nguồn mở và phổ biến được sử dụng để xây dựng các ứng dụng web hiệu suất…

Lisp – Cái nhìn tổng quan về ngôn ngữ lập trình đặc biệt

Lisp là gì? Lisp là một ngôn ngữ lập trình đặc biệt mang đến một cách tiếp cận độc đáo trong việc xử lý thông tin và…

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

Bài tập về hàm split trong Python

Chuỗi là một loại dữ liệu phổ biến trong lập trình, và việc xử lý chuỗi là một kỹ năng cần thiết cho các lập trình viên….

Xử lý chuỗi trong Python: Các phương thức cơ bản

Python là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Nó được sử dụng rộng rãi trong nhiều lĩnh vực, từ phát triển…

Game bài đổi thưởng hữu ích:

Tải Sunwin | Tải Go88 | Hit Club | 789 | Trang Chủ Kubet