0

我有一个带有自动旋转导航的 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。我可以通过样式表设置 opacity:1!important，但这是 CSS3，ie7、8 不支持。JS 解决方案将是首选。

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

4

3 回答 3

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);}
    );
于 2012-09-12T15:48:29.613 回答
0

只需添加一个 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

于 2012-09-12T15:53:11.067 回答
0

尝试这个：

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

  }
  else {
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );
  }
});
于 2012-09-12T15:55:02.017 回答