Người Viết : ViKiMi Editor

Thư viện jQuery cung cấp những hiệu ứng hoàn toàn hiệu quả khi bạn muốn có một Website
Khi nhắc đến những hiệu ứng được cung cấp bởi Thư viện jQuery chắc chắn là nhắc đến rất nhiều hiệu ứng cho phép đưa ra những thiết kế tốt nhất. Những hiệu ứng này được sử dụng rất nhiều trong hầu hết các Website. Những hiệu ứng tạo nên những xử lý đẹp, những chức năng đẹp mắt. Điều này giúp cho jQuery luôn được tất cả các nhà thiết kế cảm thấy ổn.
Thư viện jQuery tạo nên sử tương tác cao hơn bao giờ hết
Tất cả sử tương tác giữa người sử dụng với Website đều dễ dàng tạo ra khi sử dụng hiệu ứng của thư viện này. Có thể nói nếu lập trình không có jQuery sẽ khiến cho người lập trình như tạo ra các sản phẩm hơi thô một chút.
+ jQuery cho phép biến mất những thứ thô đi
+ jQuery mang lại một diện mạo tốt hơn với các hiệu ứng
Các hiệu ứng mà jQuery đạt đến một yêu cầu mà bạn có thể yên tâm biến hoá trang Web của bạn một cách hiệu nghiệm hơn.
Trong phần này chúng ta sẽ làm quen với những hiệu ứng cơ bản :
+ jQuery Effects – Hide
+ jQuery Effects – Show
+ jQuery Effects – Toggle
Vậy để hiểu rõ hơn về các hiệu ứng này, chúng ta sẽ xem chi tiết dưới đây.
A ] jQuery Effects – Hide and Show
Đây là 2 phương thức jQuery cung cấp cho phép ẩn và hiện các phần tử HTML. Tạo nên thiết kế ẩn & hiện
CÚ PHÁP ::
$(selector).hide( speed, callback );
$(selector).show( speed, callback );
Hai phương thức này có cú pháp tương tự nhau và các tham số tương đồng về tính chất khi sử dụng
+ Tham số speed ( Tuỳ chọn ) : Chỉ định tốc độ Ẩn / Hiện của phần tử HTML được chọn bởi Selector
Tham số này nhận giá trị “slow”, “fast”, hoặc milliseconds
+ Tham số callback ( Tuỳ chọn ) : Chỉ định hàm sẽ thực thi khi hiệu ứng Ẩn / Hiện được hoàn thành
Đây là cách chỉ định hàm gọi lại cho các hiệu ứng của jQuery để đảm bảo rằng khi DOM của HTML đã sẵn sàng thì hàm gọi lại này mới thực thi, nhờ đó sẽ có một kết quả chính xác cho người sử dụng.
Tránh hiện tượng hiệu ứng chưa thực thi xong mà tác vụ khác đã được gọi. Và nhờ đó cũng tránh xung đột khiến kết quả hiển thị bị sai.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
/* Thực hiện gọi phương thức hide, và không gọi callback */
});
$("#show").click(function(){
$("div").show();
/* Thực hiện gọi phương thức show, và không gọi callback */
});
});
</script>
</head>
<body>
<div>
Nếu bạn Click "Hide" / "Show" , Thành phần này sẽ "Ẩn" / "Hiện".
</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

B ] jQuery Effects – toggle
Đây là phương thức Chuyển đổi / Toggle được cung cấp bởi jQuery
Phương thức Chuyển đổi / Toggle cho phép bạn thực hiện chuyển đổi hiệu ứng Ẩn / Hiện trên một phần tử được chọn bởi bộ chọn Selector
Điều đó có nghĩa là bạn có thể Ẩn / Hiện một phần tử mà không cần gọi cả phương thức hide() và Show() như phía trên.
Chỉ đơn giản là bạn dùng Toggle và sẽ chuyển đổi như sau :
+ Các phần tử đang bị ẩn sẽ được hiển thị lên
+ Các phần tử đang hiển thị sẽ bị ẩn đi
CÚ PHÁP ::
$(selector).toggle( speed , callback );
+ Tham số speed ( tùy chọn ) : Chỉ định tốc độ của hiển thị.
Tham số này có thể nhận các giá trị “slow”, “fast” hoặc mili giây.
Tham số callback ( tùy chọn ) : Chỉ định một hàm gọi lại được thực thi sau khi hiệu ứng Toggle hoàn thành.
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Chuyển đổi [ Ẩn ] / [ Hiện ] phần tử thẻ P </button>
<p> Đây là đoạn nội dung ngắn của thẻ P thứ nhất </p>
<p> Đây là đoạn thẻ P thứ hai </p>
</body>
</html>
Chúng ta thấy rằng điều này thật dễ dàng thực hiện. Các hiệu ứng cung cấp bởi thư viện jQuery cho phép bạn thực hiện rất nhiều thứ. Nếu bạn kết hợp các thuật toán và jQuery + CSS bạn sẽ có được một kết quả thú vị khi lập trình Website. Và cũng có một lựa chọn khác không tệ nhưng mang tính chất dùng ngay và khó hiểu bản chất đó là dùng Bootstrap.
+ Tất cả đều có một lợi và kém lợi ích riêng khác nhau.
+ Tuy nhiên, nếu làm chủ công việc sẽ thực hiện khiến cho bạn đạt được tốc độ cao hơn khi tiến hành lập trình.