Web Cơ Bản

Phương thức stop() 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:

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

- Phương thức stop() dùng để dừng hiệu ứng chuyển động của phần tử.

- Ví dụ: Khi bạn bấm vào nút thì phần tử có nền màu xanh bên dưới sẽ chuyển động sang phía bên phải. 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 chuyển động sẽ bị dừng lại.

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

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

$(selector).stop(stopAll,goToEnd);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức stop():

Tham số Yêu cầu Mô tả ý nghĩa & cách sử dụng
stopAll Không bắt buộc

- Tham số stopAll xác định việc nếu phần tử được thiết lập nhiều hiệu ứng chuyển động thì phương thức stop() sẽ chỉ dừng hiệu ứng chuyển động hiện tại hay là dừng hiệu ứng chuyển động hiện tại lẫn tất cả những hiệu ứng chuyển động còn lại.

- Tham số stopAll có thể được xác định bởi một trong hai giá trị:

  • true: dừng hiệu ứng chuyển động hiện tại lẫn tất cả những hiệu ứng chuyển động còn lại.
  • false: chỉ dừng hiệu ứng chuyển động hiện tại.

- Lưu ý: Mặc định thì phương thức stop() chỉ dừng hiệu ứng chuyển động hiện tại, các hiệu ứng chuyển động còn lại vẫn được tiếp tục.
goToEnd Không bắt buộc

- Tham số goToEnd xác định việc khi hiệu ứng chuyển động hiện tại bị dừng lại thì giá trị thuộc tính của hiệu ứng chuyển động đó chỉ bằng ở điểm dừng lại hay được chuyển đến trạng thái cuối cùng.

- Tham số goToEnd có thể được xác định bởi một trong hai giá trị:

  • true: giá trị thuộc tính được chuyển đến trạng thái cuối cùng.
  • false: giá trị thuộc tính chỉ bằng ở điểm dừng lại.

- Lưu ý: Mặc định, khi hiệu ứng chuyển động hiện tại bị dừng lại thì giá trị thuộc tính của hiệu ứng chuyển động đó chỉ bằng điểm dừng lại.

3) Một số ví dụ

Ví dụ 1:

- Khi bấm nút Start, phần tử sẽ có một hiệu ứng chuyển động là di chuyển sang bên phải.

- Khi bấm nút Stop thì hiệu ứng chuyển động sẽ dừng lại.

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $(".child").animate({left:"400px"},5000);
        });
        $("#stop").click(function(){
            $(".child").stop();
        });
    });
</script>
Xem ví dụ
Ví dụ 2:

- Khi bấm nút Start, phần tử sẽ có bốn hiệu ứng chuyển động:

  • Di chuyển sang bên phải
  • Di chuyển xuống dưới
  • Di chuyển về bên trái
  • Di chuyển ngược lên trên

- Khi bấm nút Stop thì hiệu ứng chuyển động hiện tại sẽ dừng lại, các hiệu ứng chuyển động còn lại sẽ tiếp tục được thực thi.

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $(".child").animate({left:"400px"},3000);
            $(".child").animate({top:"200px"},3000);
            $(".child").animate({left:"0px"},3000);
            $(".child").animate({top:"0px"},3000);
        });
        $("#stop").click(function(){
            $(".child").stop();
        });
    });
</script>
Xem ví dụ
Ví dụ 3:

- Khi bấm nút Start, phần tử sẽ có bốn hiệu ứng chuyển động:

  • Di chuyển sang bên phải
  • Di chuyển xuống dưới
  • Di chuyển về bên trái
  • Di chuyển ngược lên trên

- Khi bấm 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ị dừng.

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $(".child").animate({left:"400px"},3000);
            $(".child").animate({top:"200px"},3000);
            $(".child").animate({left:"0px"},3000);
            $(".child").animate({top:"0px"},3000);
        });
        $("#stop").click(function(){
            $(".child").stop(true);
        });
    });
</script>
Xem ví dụ
Ví dụ 4:

- Khi bấm nút Start, phần tử sẽ có bốn hiệu ứng chuyển động:

  • Di chuyển sang bên phải
  • Di chuyển xuống dưới
  • Di chuyển về bên trái
  • Di chuyển ngược lên trên

- Khi bấm nút Stop thì hiệu ứng chuyển động hiện tại sẽ dừng lại và giá trị thuộc tính của hiệu ứng chuyển động đó sẽ đạt đến trạng thái cuối cùng, các hiệu ứng chuyển động còn lại sẽ tiếp tục được thực thi.

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $(".child").animate({left:"400px"},3000);
            $(".child").animate({top:"200px"},3000);
            $(".child").animate({left:"0px"},3000);
            $(".child").animate({top:"0px"},3000);
        });
        $("#stop").click(function(){
            $(".child").stop(false,true);
        });
    });
</script>
Xem ví dụ
Ví dụ 5:

- Khi bấm nút Start, phần tử sẽ có bốn hiệu ứng chuyển động:

  • Di chuyển sang bên phải
  • Di chuyển xuống dưới
  • Di chuyển về bên trái
  • Di chuyển ngược lên trên

- Khi bấm 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ị dừng, giá trị thuộc tính của hiệu ứng chuyển động hiện tại sẽ đạt đến trạng thái cuối cùng.

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $(".child").animate({left:"400px"},3000);
            $(".child").animate({top:"200px"},3000);
            $(".child").animate({left:"0px"},3000);
            $(".child").animate({top:"0px"},3000);
        });
        $("#stop").click(function(){
            $(".child").stop(true,true);
        });
    });
</script>
Xem ví dụ