은 호버 애니메이션

Question

나는 JQuery와 신참 질문이 JQuery와 : 여기

내 바이올린입니다 :

: http://www.detailpaintinginc.com/index.php

임 호버에 문제가 : 여기 http://jsfiddle.net/NinjaSk8ter/T8TNP/

내가 달성해야 할 것입니다

낮은 색상 상자는 모두 마우스 오버시 불투명도를 변경합니다.

특정 하위 div (클래스 "상자"포함)의 불투명도가 .5로 변경되어야합니다. 이제는 한 어린이를 가리키더라도 모든 어린이 불투명도가 변경됩니다.

Answer 1

부모를 타겟팅하는 대신 div에 직접 효과를 적용하지 않는 이유는 무엇입니까?

$('.box').hover(function() { 
    $(this).stop().animate({ 
     "opacity": .5 
    }, 50) 
}, function() { 
    $(this).stop().animate({ 
     "opacity": 1 
    }, 50) 
}); 

또한 .wrap 요소의 너비가 너무 좁아서 상자가 나란히 나타나지 않았습니다.

jsFiddle example.

Answer 2

상자가 동일한 줄에 여백을 갖기 위해서는 래퍼가 약간 넓어야합니다. 또한 각 상자가 아닌 부모에 호버 기능을 실행해야합니다, 그들을 개별적으로 반응을 얻을 :

$(function() { 
    $('.wrap .box').hover(function() { 
     $(this).stop().animate({'opacity': 0.5}, 50); 
    }, function() { 
     $(this).stop().animate({'opacity': 1}, 50); 
    }); 
});​ 

다음

http://jsfiddle.net/Codemonkey/T8TNP/7/

Answer 3

당신은이 효과를 할 자바 스크립트를 필요로하지 않는 작업 데모 http://jsfiddle.net/pomeh/U4dyE/입니다 코드 :

HTML 코드

<div id="container"> 
    <div class="wrap"> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
</div>​ 

CSS 코드

,369보고

#container { 
    width: 300px; 
    height: 300px;  
} 

/* DRY :) */ 
.wrap, .box { 
    width: 50px; 
    height: 50px; 
    float: left; 
    margin: 1px 1px 1px 1px; 
} 


.box { 
    background-color: red; 

    opacity: 1; 
    filter:alpha(opacity=100); 
    /* animation for "mouse out" */ 
    -webkit-transition: opacity 0.5s linear; /* Saf3.2+, Chrome */ 
     -moz-transition: opacity 0.5s linear; /* FF4+ */ 
     -ms-transition: opacity 0.5s linear; /* IE10 */ 
     -o-transition: opacity 0.5s linear; /* Opera 10.5+ */ 
      transition: opacity 0.5s linear; 
} 

.box:hover { 
    opacity: 0.5; 
    filter:alpha(opacity=50); 
    /* animation for "mouse in" */ 
    -webkit-transition: opacity 0.5s linear; /* Saf3.2+, Chrome */ 
     -moz-transition: opacity 0.5s linear; /* FF4+ */ 
     -ms-transition: opacity 0.5s linear; /* IE10 */ 
     -o-transition: opacity 0.5s linear; /* Opera 10.5+ */ 
      transition: opacity 0.5s linear; 
} 

JS 코드

// absolutely none ! :)