Animate() trong jQuery và các ví dụ cụ thể

.animate() trong jQuery có chức năng xây dựng hiệu ứng động cho website. Cụ thể là làm cho các phần tử chuyển động mượt mà hơn. Chẳng hạn như khi bạn click vào menu làm cho nó xổ ra. Nếu không thêm animate thì sự chuyển động đó không bắt mắt cho lắm.

Phương thức animate() jQuery giúp tạo các hiệu ứng chuyển động bằng cách thay đổi các thuộc tính của phần tử từ giá trị bắt đầu đến giá trị mà bạn muốn thiết lập. Các thuộc tính muốn biến đổi và giá trị được viết theo cặp theo nguyên tắc JSON rồi truyền vào tham số thứ nhất của phương thức.

Cú pháp:

.animate(Thuộc tính,Tốc độ,'easing',function(){
 // Code
})

Ví dụ cụ thể:

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    background:#98bf21;
    height:100px;
    width:100px;
    position:absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
jQuery(document).ready(function($){
  $("button").click(function(){
    $(".demo").animate({left: '100px'});
  });
});
</script> 
</head>
<body>
<button>Nhấp vào đây</button>
<div class="demo"></div>

</body>
</html>

Sau khi ấn chuột hình ảnh sẽ trượt sang bên phải.

animate-jquery

Áp dụng với nhiều thuộc tính

jQuery(document).ready(function($){
  $("button").click(function(){
    $("div").animate({
      left: '150px',
      opacity: '0.7',
      height: '250px',
      width: '250px'
    });
  });
});

Sử dụng Giá trị Tương đối

jQuery("button").click(function($){
  $(".demo").animate({
    left: '350px',
    height: '+=100px',
    width: '+=100px'
  });
});

Sự dụng giá trị được xác định trước

Bạn có thể chỉ định giá trị chuyển động của thuộc tính với ” show”, ” hide” hoặc ” toggle”:

jQuery(document).ready(function($){
  $("button").click(function(){
    $(".demo").animate({
      height: 'toggle'
    });
  });
});

Animate jQuery theo thứ tự

Với đoạn code bên dưới sẽ tạo ra các chuyển động theo thứ tự

$("button").click(function(){
  var div = $(".demo");
  div.animate({height: '200px', opacity: '0.5'}, "slow");
  div.animate({width: '200px', opacity: '0.7'}, "slow");
  div.animate({height: '100px', opacity: '0.5'}, "slow");
  div.animate({width: '100px', opacity: '0.7'}, "slow");
});

Ví dụ tiếp theo:

jQuery(document).ready(function($){
  $("button").click(function(){
    var div = $(".demo");  
    div.animate({left: '150px'}, "slow");
    div.animate({fontSize: '10px'}, "slow");
  });
});

Kết luận: Bài viết về phương thức animate() trong jQuery khá hay để áp dụng cho website của bạn. Bạn thấy kiến thức .animate jQuery có thực sự hay không? Hãy áp dụng ngay các ví dụ mình đã nêu ở trên để thực hành ngay đi nhé.

Related Posts

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…

Tạo Form đăng ký bằng Javascript

Ghi đè trong java, cách thực hiện chi tiết

Trong lập trình hướng đối tượng, ghi đè là một kỹ thuật cho phép các đối tượng con ghi đè lại phương thức của đối tượng cha…

Khai báo biến trong Python: Hướng dẫn cho người mới

Khai báo biến là một trong những khái niệm cơ bản nhất trong bất kỳ ngôn ngữ lập trình nào, và Python cũng không phải là ngoại…