$(function() { $( "#button" ).toggle( function() { $( "#effect" ).animate({ backgroundColor: "#444444", color: "#fff", width: 500, height: 100 }, 'fast' ); }, function() { $( "#effect" ).animate({ backgroundColor: "#ddd", color: "#000", width: 240, height: 150 }, 'fast' ); } ); });
<div class="toggler"> <div id="effect"> <h3>Animate</h3> <p> 本來是不打算寫任何關於 jQuery 的入門文章了, 因為這種資訊在網路上俯拾皆是, 甚至都泛濫了。然而在實際使用時, 發現 jQuery 的精簡語法在彼此之間也實在太相像了, 如果不自己做個筆記以供隨時速查, 總是記不住。所以, 還是寫個一篇或是幾篇拿來放著, 想查閱的時候也方便。 </p> </div> </div> <div> <a href="#" id="button">Toggle Effect</a></div>
body { font-family: Verdana, 微軟正黑體, Arial; font-size: .8em; } .toggler { width: 500px; height: 180px; margin: .5em; position: relative; } #button { border: 1px solid #CCC; color: #1C94C4; background: #F6F6F6; font-weight: bold; margin: .5em; padding: .5em 1em; -webkit-border-radius: 4px; border-radius: 4px; text-decoration: none; } #effect { border: 1px solid #ddd; -webkit-border-radius: 4px; border-radius: 4px; width: 240px; height: 150px; padding: 0.4em; position: relative; color: #000; background: #ddd; } #effect h3 { border: 1px solid #E78F08; -webkit-border-radius: 4px; border-radius: 4px; background: gold; /* #F6A828; */ color: blue; font-weight: bold; margin: 0; padding: 0.4em; text-align: center; }