【jQuery】マウスオーバー時スムースに背景読み込み

by tea4two

HTML

<ul id="gnav">
<li>
<a href="#">THIS IS A SMOOTH LINK EXP.</a>
</li>     
</ul>

CSS

#gnav a {
    display: block;
    text-decoration: none;
    position: relative;
}
#gnav a span {
    display: none;
}
#gnav a.liveHover {
    background-color: #f00;
    position: absolute;
    z-index: 2;
}

JavaScript

$(function() {
  $('#gnav a').hover(function() {
    $(this).toggleClass('liveHover', 1500);
  });
});