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