jquery - 强制使用带有特定类的jquery的CSS

我有一个带有自动旋转导航的jquery横幅循环。导航设置在一个列表中，其中活动幻灯片的LI类为activeSlide：

<ul id="billboard-nav">
    <li class="activeSlide"><span class="overlay">NAV1</span></li>
    <li><span class="overlay">NAV2</span></li>
    <li><span class="overlay">NAV3</span></li>
</ul>

jQuery设置为.overlay为不透明度0，并在悬停时更改为不透明度1。

<script>
$(function() {

    $("#billboard-nav li .overlay").css({ opacity: 0 });

    $("#billboard-nav li").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );

});
</script>

这很好用，除了我需要.activeSlide .overlay来保持不透明度：1.我可以通过样式表设置不透明度：1！重要，但这是CSS3，ie7,8不支持。 JS解决方案将是更可取的。

任何帮助，将不胜感激。谢谢。

最佳答案

只需添加一个Condition并检查当前li是否具有activeSlide类即可。如果是，则不执行任何操作。

$(function() {

    $("#billboard-nav li .overlay").css({
        opacity: 0
    });

    $("#billboard-nav li").hover(

    function() {
        $(this).children('.overlay').stop().animate({
            "opacity": "1"
        }, 100);
    }, function() {
        if ($(this).hasClass('activeSlide')) {
           // Because this has ActiveSlide class do nothing
        }
        else {

            $(this).children('.overlay').stop().animate({
                "opacity": "0"
            }, 1200);
        }
        });

    });​

在这里检查FIDDLE