jquery menu buttons mouseover effect

Question

두 개의 div가 있습니다. 하나는 position : absolute (.buttonEffectWrapper)이며 다른 div의 맨 위에 있습니다 (.rightColumnButtonHighlighted).

은 또한 다음 JS 코드가 있습니다 : 그것은 모든 div의 적용을 제외하고 그것은 잘 작동

$(function(){ 
$('.buttonEffectWrapper') 
    .mouseover(function(){ 
    $('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300}) 
    }) 
    .mouseout(function(){ 
    $('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300}) 
    }) 
}); 

. 나는 현재의 div에만 적용해야하고, 어떻게 해야할지 잘 모르겠습니다.

된 div는 :

<div class="buttonEffectWrapper"></div> 
<div id="rightColumnButtonText" >CAR SERVICE</div> 
<div id="car-service-highlighted" class="rightColumnButtonHighlighted"></div> 

<div class="buttonEffectWrapper"></div> 
<div id="rightColumnButtonText" >TRAILER HAULING</div> 
<div id="trailer-hauling-highlighted" class="rightColumnButtonHighlighted"></div> 

는 효과를 http://www.raceramps.com/v2를 참조하십시오.

Answer 1

$('.buttonEffectWrapper').hover(function() { 
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 1}, {duration:300}); 
}, function() { 
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 0}, {duration:300}) 
}) 

Answer 2

사용이 :

$(function(){ 
    $('.buttonEffectWrapper').mouseover (function() { 
     $(this).next ('.rightColumnButtonHighlighted').stop().animate ({ opacity: 1 }, { duration: 300 }); 
    }).mouseout (function() { 
     $(this).next ('.rightColumnButtonHighlighted').stop().animate ({ opacity: 0 }, { duration: 300 }); 
    }); 
}); 

당신은 OK입니다 모든 일치 DIV에 "가져가"이벤트 처리기를 부착 제품, 그러나 당신의 기능에 당신이 아니라 현재의 모든 div의 애니메이션. 함수 내의 $ (this)는 현재 요소를 나타냅니다.

PS :

$(function(){ 
    $('.buttonEffectWrapper').hover (
     function() { 
      $(this).next ('.rightColumnButtonHighlighted').stop().animate ({ opacity: 1 }, { duration: 300 }); 
     }, 
     function() { 
      $(this).next ('.rightColumnButtonHighlighted').stop().animate ({ opacity: 0 }, { duration: 300 }); 
     } 
    ); 
}); 

내가 코드를 업데이트했습니다 당신이 코드를 조금 더 쉽게 읽을 수 있도록 jQuery를에 hover 도우미를 사용할 수 있습니다. 다음 요소를 얻으려면 next()을 사용하십시오. $(this)

Answer 3

"rightColumnButtonText"클래스로 모든 요소를 ​​선택했기 때문입니다. $(this).siblings('.rightColumnButtonText').stop().animate({opacity: 1}, {duration:300})

Answer 4

<script type="text/javascript"> 

$(function(){ 

    $('.buttonEffectWrapper') 

     .mouseover(function(){ 
      $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300} 
     }) 
     .mouseout(function(){ 
        $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300} 
     }) 
}); 
</script> 

해야할까요? 그래도 괜찮은 일도 ....

Answer 5

최종 작업 코드 ... 모두 감사합니다!

$(function(){ 
    $('.buttonEffectWrapper').hover (
     function() { 

      var effect = $(this).siblings().filter(":last"); 
      effect.stop().animate ({ opacity: 1 }, { duration: 300 }); 

     }, 
     function() { 
        var effect = $(this).siblings().filter(":last"); 
        effect.stop().animate ({ opacity: 0 }, { duration: 300 }); 

     } 
    ); 
});