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; }
    #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

<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.

Demikian sedikit tips blog metro ui style yang saya berikan, semoga bermanfaat dan Enjoy Blogging

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku