強制css與jQuery的某一類

我有一個jQuery的橫幅循環自動旋轉導航。導航設在一個列表中，其中活性滑動具有LI類activeSlide的：強制css與jQuery的某一類

<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解決方案將更受歡迎。

任何幫助，將不勝感激。謝謝。

來源

2012-09-12 user1521516

設置，重要的不是CSS3！ –

用於IE用戶過濾器和-ms過濾器中的不透明度。更多的信息在這裏：http：//www.quirksmode.org/css/opacity.html –

只需添加一個條件，檢查當前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-12 15:53:11

這一個爲我工作，但一旦幻燈片更改，具有類activeSlide的前面的LI仍然不透明：1. – user1521516

第一問，如果李包含前行類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-12 15:48:29

試試這個：

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

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

來源

2012-09-12 15:55:02

開玩笑說明：他們也爲這種情況創建了Not運算符'！'。 ;） – rcdmk

謝謝我知道，我通常不會使用不是我的泄漏，我必須糾正 –

強制css與jQuery的某一類

回答

相關問題