Web Designer: Membuat Efek Smooth di Menu dengan jQuery

Tujuan - Membuat menu Halus

Lihat demo

Pendahuluan - Penjelasan mengurangi

Menu memiliki seperti animasi halus karena hal yang disebut "pelonggaran". Adobe definisi di Flash Developer Center lebih lengkap:

"Turunnya merujuk pada percepatan atau perlambatan bertahap selama animasi, animasi yang membantu Anda terlihat lebih realistis. Pelonggaran menciptakan penampilan yang lebih alami percepatan atau perlambatan secara bertahap menyesuaikan tingkat perubahan. "

Berkat keajaiban plugin jQuery Easing, kita sekarang dapat menggunakan mereda di luar lingkungan Flash dan ActionScript. Download di situs proyek resmi

Langkah 1 - Siapkan Struktur

Buat folder baru dengan nama NavAnimatedjQuery, kemudian dokument baru seperti di bawah ini simpan dengan nama index.html.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Smooth Animated jQuery Menu</title>

        <link rel="stylesheet" href="style.css"/>

        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="animated-menu.js" type="text/javascript"></script>
    </head>
        <body>
        <p>Rollover a menu item to expand it.</p>
        <ul>
            <li class="green">
                <p><a href="#">Home</a></p>
                <p class="subtext">The front page</p>
            </li>
            <li class="yellow">
                <p><a href="#">About</a></p>
                <p class="subtext">More info</p>
            </li>
            <li class="red">
                <p><a href="#">Contact</a></p>
                <p class="subtext">Get in touch</p>
            </li>
            <li class="blue">
                <p><a href="#">Submit</a></p>
                <p class="subtext">Send us your stuff!</p>
            </li>
            <li class="purple">
                <p><a href="#">Terms</a></p>
                <p class="subtext">Legal things</p>
            </li>
        </ul>
    </body>
    </html>

Langkah 2 - Mengatur dengan CSS

buat dokument seperti dibawah ini kemudian simpan dengan nama style.css taruh di folder
NavAnimatedjQuery.
body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

ul{
    margin:0;
    padding:0;
}

li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

    .subtext{
        padding-top:15px;
    }

/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}

Langkah 3 - Membuat efek animasi dengan jQuery

taruh di dalam tag <head> -- taruh disini --</head> kode dibawah ini:
<script type="text/javascript">
            $(document).ready(function(){

                //When mouse rolls over
                $("li").mouseover(function(){
                    $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
                });

                //When mouse is removed
                $("li").mouseout(function(){
                    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
                });

                });
    </script>

Berikut sedikit penjelasannya:
Ada dua tindakan dalam kode di atas. Ketika mouse bergerak di atas item menu, item mulai animasi di mana telah melebar 150px tinggi selama 0,6 detik. Turunnya diterapkan melalui plugin tersebut 'easeOutBounce' yang menyebabkan kotak untuk "terpental" sedikit karena mencapai akhir animasi ("keluar"). Ketika mouse digerakkan dari animasi dengan ukuran mulai dipicu.
Jika Anda menggunakan ini dalam konteks situs yang lebih besar, cukup mengganti elemen yang dipilih (saat ini "li") untuk acara mouse ke pemilih yang diperlukan.
Pemberhentian () metode dirantai sebelum bernyawa untuk mencegah penyangga dari bangunan di mana animasi akan loop berulang kali jika mouse dipindahkan sekitar cepat di atasnya.

(untuk plugin jQuery easing--> buat folder js di dalam folder NavAnimatedjQuery kemudian simpan file jQuery didalam folder js)

Langkah 4 - Tambahkan Flair Beberapa

Saya telah menambahkan gambar latar belakang untuk setiap item menu dalam versi live dan file source untuk menggambarkan beberapa kemungkinan desain. Ada banyak cara kreatif lainnya untuk menambahkan effect beberapa menu. lakukan percobaan.

sekian, semoga bermanfaat....