Cách tạo ra các hiệu ứng chuyển động phần tử DOM HTML trong jQuery

[PVS]

Cách tạo ra các hiệu ứng chuyển động phần tử DOM HTML trong jQuery

Như đã đề cập ở tiêu đề, để tạo ra được các hiệu ứng chuyển động phần tử chúng ta sẽ dùng đến phương thức animate().

Phương thức animate() giúp bạn tạo ra các hiệu ứng động bằng cách thay đổi các thuộc tính của phần tử từ giá trị ban đầu đến giá trị mong muốn. Các thuộc tính muốn biến đổi và giá trị của nó 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. Tham số thứ hai của phương thức là khoảng thời gian (mili giây) diễn ra hiệu ứng. Cú pháp cơ bản như sau:

.animate({property1: value1, property2: value2, ... }, speed);

Có thể thêm tham số thứ 3 là chức năng easing 'swing' 'linear', tham số thứ 4 là một hàm callback, được gọi sau khi hiệu ứng hoàn thành.

Ví dụ sau, hiệu ứng diễn ra trong 2s bằng cách thay đổi chiều rộng, cao của phần tử.

<div id="example1"></div>
<button id="button1">Hiệu ứng animate()</button>

<script>
    $("#button1").click(function () {

        $("#example1").css({"width": "10px",
            "height": "10px",
            "background":"orangered"});

        $("#example1").animate(
            {"width": "100%", "height": "100px"}, 2000);
    });
</script>

Bạn cũng có thể thiết lập hiệu ứng thay đổi từ giá trị hiện tại tới giá trị cộng thêm bằng cách dùng += hoặc -=

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

Dừng lập tức hiệu ứng động
Hiệu ứng đang chạy với .animate() có thể bắt dừng ngay lập tức bằng phương thức .stop()

<div id="example2"><strong>****</strong></div>

<button id="button2">Chạy animate()</button>
<button id="button3">Dừng animate()</button>


<script>
    function animate_examp() {

        var mr = $("#example2").css("margin-left");
        if (mr == '0px')
            $("#example2").animate({"margin-left": "320px"}, 2000, "linear", function () {
                animate_examp();
            });
        else
            $("#example2").animate({"margin-left": "0px"}, 2000, "linear", function () {
                animate_examp();
            });

      }


    $("#button2").click(function () {
        animate_examp();
        $(this).hide();
    });

    $("#button3").click(function () {

        $("#example2").stop();
        $("#button2").show();

    });
</script>

Chúc các bạn thành công.

Nguồn: Internet​