JQuery的懸停動畫

Question

我有一個jQuery的新手問題：

這裏是我的小提琴：http://jsfiddle.net/NinjaSk8ter/T8TNP/

以下是我需要完成：具有http://www.detailpaintinginc.com/index.php

林與懸停一個問題：

您會注意到，較低的顏色框全部都會在懸停時更改不透明度。

爲特定的子格（帶班「盒子」）的不透明度應改變到0.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/你不需要Javascript功能來做到這一點的影響，看代碼:)

HTML代碼

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

CSS代碼

#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 ! :)