.animate()

Định nghĩa và sử dụng

  • .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

  • Đã đượ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("<div>Animation Complete</div>");
     }
});

.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="https://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="images/bg_hwc.gif" 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)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
button {
    margin: 10px;
}
img {
    position: relative;
    left: 10px;
}
</style>
<script>
$(function(){
    $('button').click(function() {
        $('img').animate({
            width: 'toggle',
            height: 'toggle'
        }, {
             duration: 5000,
             specialEasing: {
                 width: 'linear',
                 height: 'linear'
             },
             complete: function() {
                 $(this).after("<div>Animation Complete</div>");
             }
        });
    });
});
</script>
</head>

<body>
<p><button>Click here</button></p>
<img src="images/bg_hwc.gif" alt="" width="129" height="129">
</body>
</html>

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

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

.andSelf()

.append()