hover()とanimate()を使ったボタン〜jQuery | IT工房

animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。
次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさになります。
また、背景色をアニメーションさせています。
background-colorをアニメーションさせるには通常のjQueryではできません。background-colorはanimate()に対応していません。
けれども、jquery-uiを導入することでbackground-colorをanimate()に対応させることができます。jquery-uiはイージングの種類も増えますし、animateの種類も増えます。是非導入しておきたいプラグインです。
jquery-uiはこちら

サンプル
スクリプト

$(function(){
    $('li').hover(function(){
        $(this).animate({width:200,backgroundColor:'#ff0066'},'slow');
    },function(){
        $(this).animate({width:100,backgroundColor:'#1C00F5'},'slow');
    })
})

CSS

li {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #1C00F5;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #fff;
    list-style-type: none;
}

HTML

<div id="container">
          <h1>hover()の例</h1>
          <ul>
            <li>no1</li>
            <li>no2</li>
            <li>no3</li>
            <li>no4</li>
            <li>no5</li>
          </ul>
        </div>

ただし、上記のサンプルでは何度もボタンの上でマウスを動かすと不具合がでます。
次のサンプルが修正版です。

サンプル

$(function(){
    $('li').hover(function(){
        $(this).stop().animate({width:200,backgroundColor:'#ff0066'},'slow');
    },function(){
        $(this).stop().animate({width:100,backgroundColor:'#1C00F5'},'slow');
    })
})

次の例はeach()を使用してそれぞれの四角形の長さを変更したものです。
サンプル

$(function(){
        var v=0;
    $('li').each(function(){
        v+=50;
        $(this).animate({width:100+v,backgroundColor:'#ff0066'},'slow');
    })
})

li{
    width:100px;
    height:40px;
    line-height:40px;
    background-color:#1C00F5;
    color:#fff;
    text-align:center;
    border-bottom:1px solid #fff;
    list-style-type:none;
}