Efek toggle jquery ui color animasi

1. Efek Toggle Jquery UI Color
Animasi
Efek Toggle Jquery UI Color Animasi - Melanjutkan
artikel menu metro ui efek modal dialog dan menu navigasi
metro ui dengan gaya metro style, kali ini saya akan
memberikan contoh penerapan Jquery UI untuk template blog
metro style. Dengan demikian konsep blog akan jadi lebih
komplit dengan gaya metro Ui yang berkembang saat ini.
 DEMO
CSS
.toggler { width: 600px; height: 200px; position: relative; }
#button { background:#2c3e50;color;#fff;padding: .5em 1em;
text-decoration: none; }
#effect { width: 300px; height: 160px; padding: 0.4em;
position: relative;background: #fff; }

2. #effect h3 { background:#2c3e50;color:#fff;margin: 0;
padding: 0.4em; text-align: center; }
Java Script
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({
backgroundColor: "#27ae60",
color: "#fff",
width: 600
}, 1000 );
} else {
$( "#effect" ).animate({
backgroundColor: "#fff",
color: "#000",
width: 300
}, 1000 );
}
state = !state;
});
});
HTML

3. <div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">CONTOH
ANIMASI</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet
commodo magna eros quis urna. Nunc viverra imperdiet enim.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-
all">Klik INI</a>
Untuk bisa menggunakannya install / tambahkan kode dibawah
ini sebelum </head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Saya memberikan contoh sederhana saja, untuk penerapannya
silakan anda berkreasi sendiri agar tampilan lebih maksimal.

4. Demikian sedikit tips blog metro ui style yang saya berikan,
semoga bermanfaat