특정 클래스의 jquery로 CSS를 강제 실행

Question

자동 회전하는 탐색 기능이 포함 된 jquery 배너 사이클이 있습니다. 탐색은 활성 슬라이드 activeSlide의 LI 클래스 갖는리스트에 설정되어

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> 

너무 불투명 0 .overlay이며, 마우스 오버시에, 그 불투명도를 변경 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 솔루션이 훨씬 더 선호 될 것입니다.

도움을 주시면 감사하겠습니다. 고맙습니다. 리튬은 선하기 전에 각 기능에이를 넣어 클래스 activeSlide가 포함되어있는 경우

Answer 1

는 그냥 조건을 추가하고 확인 현재의 경우 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); 
     } 
     }); 

    });​ 

check,363,210 여기

Answer 2

또 다른 선택은 당신이

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 3

이 시도 :

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

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