Hiệu ứng động Với Animate() Trong JQuery

Trang chủ » Các Hiệu ứng Jquery » Hiệu ứng động Với Animate() Trong JQuery

Có thể bạn quan tâm

Hiệu ứng 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ủa cơ bản như sau:

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

Có thể thêm tham số thứ 3 chức năng easing 'swing' 'linear', tham số thứ 4 là, là một hàm callback, được gọi sau khi hiệu ứng độ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ử.

Hiệu ứng animate() <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()

**** Chạy animate() Dừng animate() <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> ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới

Từ khóa » Các Hiệu ứng Jquery