努力理解jquery-在mouseover上淡入/淡出類

Question

我目前正在嘗試學習jQuery和JavaScript，並且為了進行導航，我試圖使其在鼠標懸停時帶有下划線，盡管它可能無法清除代碼，但我設法使用addClass和removeClass做到了。

我現在正在嘗試使下划線類淡入淡出，我相信這是CSS3通常完成的操作，但是由於只是嘗試學習jquery，所以我一直在嘗試解決。

我嘗試將.fadeIn（）和.fadeOut（）放在代碼中的不同位置，但是似乎沒有任何效果，因此我假設這不是正確的方法。

這是我的代碼

的HTML

   <div class="navleft">
        <ul>
            <li class="active">Home</li>
            <li class="active1">Dealerships</li>
            <li class="active1">Contact</li>
        </ul>

    </div>

的CSS

   .navleft ul li.active1 {
    border-width: 0 0 1px 0;
    border-color: #999;
    border-style: solid;
    cursor: pointer;
    }

   .navleft ul li.active {
    border-width: 0 0 1px 0;
    border-color: #999;
    border-style: solid;
    cursor: pointer;

    }

Java腳本

    $(function(){
    $('.navleft ul li').removeClass('active1');


    $('.navleft ul li').mouseover(function(){
    $(this).addClass('active1');
    });

    $('.navleft ul li').mouseout(function(){
    $(this).removeClass('active1');
    })

    });

如果有人可以提供幫助，那將是非常不錯的，因為我真的很堅持這一點。

Answer 1

班級不能淡入或淡出。 fadeIn和fadeOut用於元素的不透明度。 如果您確實想要淡化樣式，則必須編寫自己的動畫代碼（我不推薦）或使用CSS3 transitions ，無論如何我都建議這樣做。

Answer 2

這是一種CSS方式，可以在懸停時從一個邊界平滑過渡到另一個邊界： http : //jsfiddle.net/u4h7k/2/ 。

HTML：

<ul id = "nav">
    <li>Home</li>
    <li>Dealerships</li>
    <li>Contact</li>
</ul>

CSS：

#nav > li {
    position: relative;
    cursor: pointer;
}

#nav > li:before, #nav > li:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid blue;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

#nav > li:after {
    border-bottom: 1px solid red;
    opacity: 1;
}

#nav > li:hover:after {
    opacity: 0;
}

#nav > li:hover:before {
    opacity: 1; 
}