努力理解 jquery - 在鼠标悬停时淡入/淡出类答案

【问题标题】：Struggling to understand jquery - Fade in/out a class on mouseover努力理解 jquery - 在鼠标悬停时淡入/淡出类
【发布时间】：2014-08-26 01:24:02
【问题描述】：

我目前正在尝试学习 jQuery 和 JavaScript，并且对于我的导航，我试图让它在鼠标悬停时看起来带有下划线，虽然它可能没有清理过代码，但我已经设法使用 addClass 做到了并删除类。

我现在正试图让下划线类淡入淡出，我相信这通常是用 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;

    }

Javascript

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


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

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

    });

如果有人可以提供帮助，那就太好了，因为我真的坚持这个。

【问题讨论】：

首先，您的.active1 和.active 类是相同的。其次，边界声明可以重写为.border-bottom: 1px solid #999。第三，您似乎对从一种边框外观到另一种边框外观的动画变化感兴趣。后者可以使用 jQuery 完成，但正如其他人所说，最好使用 CSS 来完成。

标签： javascript jquery css class fade

【解决方案1】：

类不能淡入或淡出。 fadeIn 和 fadeOut 用于元素的不透明度。如果您真的想 ›fade‹ 一种样式，您必须编写自己的动画代码（我不推荐）或使用 CSS3 transitions，无论如何我都会推荐。

【讨论】：

嗯，在某种程度上，如果你安装了 jQuery UI，他们可以。 css 过渡虽然会更平滑、更高效、更轻等

【解决方案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; 
}

【讨论】：