Để thêm hiệu ứng giảm bớt cho hoạt ảnh của bạn, hãy sử dụng tốc độ hoạt ảnh đúng cách để tạo thành một hoạt ảnh hoàn hảo cho trang web. Không tăng tốc hoạt ảnh và bạn nên biết nơi dừng nó khi sử dụng animate ().
Đây là ví dụ của chúng tôi, chúng tôi có một nút đưa bạn đến một vùng văn bản để thêm câu trả lời:
<button class="btn" id="answer"> Add answer </button>
Bây giờ, hãy đặt thuộc tính fade out đúng cách để đặt hiệu ứng nới lỏng.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click', '#answer', function() {
var container = $('.new-answer');
container.css('opacity', '0');
$(this).fadeOut('fast', function() {
$(this).hide();
container.show();
container.animate({ height: "200px",
opacity: 1}).animate({
height: "170px" });
});
});
});
</script>
<style>
.btn {
width: 150px;
height: 40px;
color:#666666;
text-decoration: none;
}
.new-answer {
background: none repeat scroll 0 0 #00FFFF;
border: 2px solid #94ACBE;
border-radius: 5px 5px 5px 5px;
margin-bottom: 40px;
}
.new-answer .middle, .top {
padding: 0 10px;
}
.new-answer textarea {
color: #000080;
font: 12px;
height: 120px;
padding: 2px;
width: 100%;
}
</style>
</head>
<body>
<button class="btn" id="answer">Add answer</button>
<div class="new-answer" hidden="true">
<div class="top">
<span>Add a new answer below</span>
</div>
<div class="middle">
<textarea id="question-content"></textarea>
</div>
</div>
</body>
</html>