Efek Toggle Animasi Dengan Jquery UI

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

Code:

.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

Code:

$(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;
    });
  });

Saya memberikan contoh sederhana saja, untuk penerapannya silakan anda berkreasi sendiri agar tampilan lebih maksimal.


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

SOURCE

 

ijin coba gan... langsung

ijin coba gan... langsung dipraktekan
makasih infonya

 

saya kurang ngerti tentang

saya kurang ngerti tentang coding

 

xface2 wrote:

Kan sudah disediain.. gratis lagi.. tinggal copas

 

itu maksud nya apa

itu maksud nya apa

 

Template

kalo ane lebih suka template terima jadi.. edit edit dikit...
Kalo harus nambain fitur macem macem haddeh musmet

Ini aja ane gak paham..

 

Itu lebih enak lagi dong

Itu lebih enak lagi dong

 

Virlyz82 wrote:

bisa coding kan, lain kali pas bikin thread pakai tool editor code bersosial, biar lebih enak dilihat jangan langsung copas tempel disini,

 

Siiip..maklum baru gabung

Siiip..maklum baru gabung disini...dan ga biasa thread disini..mkasih sarannya