अपने एनिमेशन में ईजिंग इफेक्ट जोड़ने के लिए, एनिमेशन स्पीड का सही उपयोग करें ताकि यह वेब पेज के लिए एक परफेक्ट एनिमेशन बन जाए। एनिमेशन को तेज न करें और आपको पता होना चाहिए कि animate() का उपयोग करते समय इसे कहां रोकना है।
हमारे उदाहरण के लिए, हमारे पास एक बटन है जो आपको उत्तर जोड़ने के लिए एक टेक्स्टएरिया पर ले जाता है:
<button class="btn" id="answer"> उत्तर जोड़ें </button>अब फेड आउट प्रॉपर्टी को सही ढंग से सेट करके ईजिंग इफेक्ट सेट करें।
उदाहरण
<!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; 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">उत्तर जोड़ें</button>
<div class="new-answer" hidden="true">
<div class="top"> <span>नीचे एक नया उत्तर जोड़ें</span> </div>
<div class="middle"> <textarea id="question-content"></textarea> </div>
</div>
</body>
</html>
