Đị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..animate()được sử dụng rất nhiều, trong việc tạo ra hiệu ứng chuyển động.
Cấu trúc
$('.test').animate({
opacity: 0.25,
left: "+=50"
}, 5000);
.animate(Thuộc tính,Tốc độ,function(){})
$('.test').animate({
opacity: 0.25,
left: "+=50"
}, 5000, function() {
// Animation complete.
});
Bài học chỉ muốn cho bạn hiểu cách sử dụng .animate, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.
.animate(Thuộc tính,Tốc độ,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'
},1000);
});
});
</script>
</head>
<body>
<p><button>Click here</button></p>
<img src="/exercises/images/img_350x260.png" alt="" width="129" height="auto">
</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({
opacity: 0.25,
left: '+=50'
},1000, function() {
$(this).after("<div>Animation Complete</div>");
});
});
});
</script>
</head>
<body>
<p><button>Click here</button></p>
<img src="/exercises/images/img_350x260.png" alt="" width="129" height="auto">
</body>
</html>
Hiển thị trình duyệt:
Click vào button để xem hiệu ứng animate.