Web Cơ Bản

Phương thức finish() trong jQuery

Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

  • Phương thức animate() trong jQuery
  • Phương thức stop() trong jQuery

1) Phương thức finish() trong jQuery

- Phương thức finish() dùng để dừng toàn bộ các hiệu ứng chuyển động của phần tử, giá trị thuộc tính trong các hiệu ứng chuyển động sẽ được đạt đến trạng thái cuối cùng.

- Ví dụ: Khi bạn bấm vào nút thì phần tử bên dưới sẽ có ba hiệu ứng chuyển động là chiều rộng tăng dần thành 700px ---> chiều cao tăng dần thành 400px ---> kích cỡ chữ to dần thành 80px. Tuy nhiên, nếu hiệu ứng chưa kết thúc mà bạn bấm vào nút thì hiệu ứng hiện tại lẫn các hiệu ứng còn lại sẽ bị kết thúc, giá trị thuộc tính trong các hiệu ứng chuyển động sẽ được đạt đến trạng thái cuối cùng.

TÀI LIỆU HỌC LẬP TRÌNH WEB

- Lưu ý: Phương thức finish() khá giống với phương thức stop(true,true). Tuy nhiên, đối với phương thức finish() thì giá trị thuộc tính của tất cả các hiệu ứng chuyển động sẽ được đạt đến trạng thái cuối cùng, còn đối với phương thức stop(true,true) thì chỉ có giá trị thuộc tính của hiệu ứng chuyển động hiện tại là được đạt đến trạng thái cuối cùng.

2) Cách sử dụng phương thức finish() trong jQuery

- Để sử dụng phương thức finish(), ta dùng cú pháp như sau:

$(selector).finish();
Ví dụ:

- Khi bạn bấm vào nút Start thì phần tử <div> sẽ có ba hiệu ứng chuyển động:

  • Chiều rộng tăng dần thành 500px
  • Chiều cao tăng dần thành 350px
  • Kích cỡ chữ to dần thành 80px

- Khi bạn bấm vào nút Stop thì hiệu ứng chuyển động hiện tại lẫn các hiệu ứng còn lại sẽ bị kết thúc, giá trị thuộc tính trong các hiệu ứng chuyển động sẽ được đạt đến trạng thái cuối cùng.


<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $("div").animate({width:"500px"},6000);
            $("div").animate({height:"350px"},6000);
            $("div").animate({fontSize:"80px"},6000);
        });
            $("#stop").click(function(){
            $("div").finish();
        });
    })
</script>
Xem ví dụ