Question

我有一个带有自动旋转导航的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解决方案将更受欢迎。

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

Answer 1

首先询问li是否包含activeSlide类，将其放在您拥有的行之前的每个函数中

if(!$(this).attr("class") || $(this).attr("class")!="activeSlide"

另一个选择是：

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

Answer 2

只需添加一个条件并检查当前的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

Answer 3

试试这个：

$('#billboard-nav li').hover(function() {
  if ($('this').hasClass('activeSlide')) {

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

使用jquery为某个类强制css

3 个答案: