こんにちは!
WEBデザイナーのねこふらいです!

今回はjQueryを使った簡単なホバーアニメーションを紹介します。
一番下にデモもありますので、是非参考にしてください!

HTML

<a href="#" id="button1">button1</a>
<a href="#" id="button2">button2</a>
<a href="#" id="button3">button3<span id="SubBG"><span id="SubInner">button3</span></span></a>
<a href="#" id="button4">button4</a>
<a href="#" id="button5">button5</a>

CSS

/*ボタンのデザイン*/

a {
    display: block;
    width: 120px;
    height: 40px;
    margin: 25px auto;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    color: #333;
    padding: 9px 45px;
    border: solid 1px #333;
    background: #fff;
}

/*ボタン2*/

#button2 {
    position: relative;
}

/*ボタン3*/

#button3 {
    position: relative;
}

#SubBG {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
}

#SubBG #SubInner {
    display: block;
    width: 120px;
    height: 40px;
    padding: 9px 45px;
    border: solid 1px #333;
    color: #fff;
    background: #333;
}

/*ボタン4*/

#button4 {
    transition: all 0.5s;
}

.roop {
    transform: rotateY(360deg);
}

/*ボタン5*/

#button5 {
    transition: all 0.5s;
}

.roop2 {
    transform: rotateX(360deg);
}

jQuery

$(function () {

    //ボタン1
    $('#button1').on('mouseover', function () {
        $(this).stop(true).animate({
            backgroundColor: '#000',
            color: '#fff'
        }, 500);
    }).on('mouseout', function () {
        $(this).stop(true).animate({
            backgroundColor: '#fff',
            color: '#333'
        }, 500);
    });

    //ボタン2
    $('#button2').on('mouseover', function () {
        $(this).stop(true).animate({
            top: '-5px',
            borderColor: '#931e29',
            color: '#931e29'
        }, 400);
    }).on('mouseout', function () {
        $(this).stop(true).animate({
            top: '0px',
            borderColor: '#333',
            color: '#333'
        }, 400);
    });

    //ボタン3
    $('#button3').on('mouseover', function () {
        $('#SubBG').stop(true).animate({
            width: '100%'
        }, 500, 'easeOutQuad');
    }).on('mouseout', function () {
        $('#SubBG').stop(true).animate({
            width: '0'
        }, 500, 'easeOutQuad');
    });

    //ボタン4
    $('#button4').on('mouseover', function () {
        $(this).addClass('roop').stop(true).animate({
            backgroundColor: '#333',
            color: '#fff'
        }, 100);
    }).on('mouseout', function () {
        $(this).removeClass('roop').stop(true).animate({
            backgroundColor: '#fff',
            color: '#000'
        }, 100);
    });

    //ボタン5
    $('#button5').on('mouseover', function () {
        $(this).addClass('roop2').stop(true).animate({
            backgroundColor: '#333',
            color: '#fff'
        }, 100);
    }).on('mouseout', function () {
        $(this).removeClass('roop2').stop(true).animate({
            backgroundColor: '#fff',
            color: '#000'
        }, 100);
    });

});
デモはこちら

HOME > java script > jQueryを使ったホバーアニメーション