为了使jQuery动画更流畅,请使用easing库。正确使用动画速度可以使其成为网页的理想动画。不要加快动画的速度,使用时应该知道该在哪里停止动画animate()
。
例如,设置一个按钮,该按钮在单击时淡出并显示文本区域:
<button class="btn" id="answer">Add answer</button>
以下是使用animation()
和生成的显示更流畅动画的文本区域fadeout()
:
<div class="middle"> <textarea id="question-content"></textarea> </div>
您可以尝试运行以下代码以使jQuery动画更流畅:
<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/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>