Tạo tài khoản

Previous Lesson Next Lesson

.animate() trong jQuery

Định nghĩa và sử dụng .animate() trong jQuery

.animate(): Thực hiện một hình ảnh động (animate) tùy chỉnh của một tập hợp các thuộc tính css.

Cấu trúc .animate() trong jQuery

Đã được thêm vào từ phiên bản 1.0

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

Thuộc tính:

backgroundPositionX (VD: backgroundPositionX:"+=100px")
backgroundPositionY (VD: backgroundPositionY:"+=100px")
borderWidth (VD: borderWidth:"10px")
borderBottomWidth (VD: borderBottomWidth:"10px")
borderLeftWidth (VD: borderLeftWidth:"10px")
borderRightWidth (VD: borderRightWidth:"10px")
borderTopWidth (VD: borderTopWidth:"10px")
borderSpacing (VD: borderSpacing:"10px")
margin (VD: margin:"+=100px")
marginBottom (VD: marginBottom:"+=100px")
marginLeft (VD: marginLeft:"+=100px")
marginRight (VD: marginRight:"+=100px")
marginTop (VD: marginTop:"+=100px")
opacity (VD: opacity:0.25)
outlineWidth (VD: outlineWidth:"10px")
padding (VD: padding:"+=100px")
paddingBottom (VD: paddingBottom:"+=100px")
paddingLeft (VD: paddingLeft:"+=100px")
paddingRight (VD: paddingRight:"+=100px")
paddingTop (VD: paddingTop:"+=100px")
height (VD: height:"+=100px")
width (VD: width:"+=100px")
maxHeight (VD: maxHeight:"+=100px")
maxWidth (VD: maxWidth:"+=100px")
minHeight (VD: minHeight:"+=100px")
minWidth (VD: minWidth:"+=100px")
fontSize (VD: fontSize:"1em")
bottom (VD: bottom:"+=100px")
left (VD: left:"+=100px")
right (VD: right:"+=100px")
top (VD: top:"+=100px")
letterSpacing (VD: letterSpacing:"+=10px")
wordSpacing (VD: wordSpacing:"+=10px")
lineHeight (VD: lineHeight:"+=10px")
textIndent (VD: textIndent:"10px")
Tốc độ có thể bằng số hoặc bằng chữ: slow, fast (mặc đinh 400).

Easing có thể sử dụng swing hoặc linear (mặc định swing).

$('.test').animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
    }, 5000, 'swing', function() {
        // Animation complete.
    });;

.animate(Thuộc tính,options)

Các giá trị của options:

duration có thể bằng số hoặc bằng chữ: slow, fast.
Easing có thể sử dụng swing hoặc linear (mặc định swing).
queue: có giá trị true hay false, xác có hay không trong việc đặt các animate trong hàng đợi hiệu ứng, nếu giá trị false animate sẽ hoạt động ngay lập tức.
specialEasing: một bản đồ (map) của một hoặc nhiều thuộc tính css định nghĩa bởi đối số và hàm easing tương ứng (được thêm vào phiên bản 1.4).
step: quy định cụ thể chức năng được thực hiện sau mỗi bước trong các hình ảnh động.
progress: một chức năng được gọi sau mỗi bước của các hình ảnh động, chỉ một lần cho mỗi phần tử không phụ thuộc vào số thuộc tính animate.
complete: một chức năng được gọi sau khi hoàn thành animate.
done: một chức năng được gọi sau khi hoàn thành animate (đối tượng Promise được giải quyết).
fail: một chức năng được gọi sau khi không hoàn thành animate (đối tượng Promise được loại bỏ).
always: một chức năng được gọi sau khi animate hoàn thành hoặc dừng lại (đối tường Promise được giải quyết hoặc loại bỏ).

$('img').animate({
     width: 'toggle',
     height: 'toggle'
}, {
     duration: 5000,
     specialEasing: {
          width: 'linear',
          height: 'linear'
     },
     complete: function() {
          $(this).after("Animation Complete");
     }
});

.animate(Thuộc tính,Độ bền,'easing',function(){})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
button {
    margin: 10px;
}
img {
    position: relative;
    left: 10px;
}
</style>
<script>
$(function(){
    $('button').click(function() {
        $('img').animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
        },2000, function() {
            $('button').text("Click tiếp để thấy hiệu ứng");
        });
    });
});
</script>
</head>

<body>
<p><button>Click here</button></p>
<img src="https://hoclaptrinh.vn/themes/client/img/code-screen.jpg" alt="" width="129" height="129">
</body>
</html>

Hiển thị trình duyệt:

Click vào button để xem hiệu ứng animate.

.animate(Thuộc tính,option)