.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. .animate() được sử dụng rất nhiều, trong việc tạo ra hiệu ứng chuyển động. .animate(Thuộc tính,option) Cấu trúc $(‘.test’).animate({ opacity: 0.25, left: “+=50″ }, 5000); Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>Tiêu […]
Đị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.
.animate(Thuộc tính,option)
Cấu trúc
$('.test').animate({
opacity: 0.25,
left: "+=50"
}, 5000);
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 class="alignnone size-full wp-image-1287 image-test-01" style="position: relative;" src="https://lth90.top/wp-content/uploads/2023/09/img_planet.png" alt="" width="200" height="150" />
</body>
</html>
Hiển thị trình duyệt:
Click vào button để xem hiệu ứng animate.
.animate(Thuộc tính,Tốc độ,function(){})
Cấu trúc
$('.test').animate({
opacity: 0.25,
left: "+=50"
}, 5000, function() {
// Animation complete.
});
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 class="alignnone size-full wp-image-1287 image-test-02" style="position: relative;" src="https://lth90.top/wp-content/uploads/2023/09/img_planet.png" alt="" width="200" height="150" />
</body>
</html>
Hiển thị trình duyệt:
Click vào button để xem hiệu ứng animate.
