jquery - JQuery 悬停动画

Question

我有一个 Jquery 新手问题：

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

这是我需要完成的事情：http: //www.detailpaintinginc.com/index.php

我在悬停时遇到问题：

您会注意到较低的颜色框在悬停时都会改变不透明度。

特定子 div（带有类“框”）的不透明度应更改为 0.5 即使我只将鼠标悬停在一个孩子上，它现在的所有孩子的不透明度都在变化。

Answer 1

这是一个工作演示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;
}

​</p>

​JS代码

// absolutely none ! :)

Answer 2

Why not just apply the effect directly to the divs instead of targeting the parent?

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

Also, your width on the .wrap element was too narrow which is why the boxes weren't appearing side by side.

jsFiddle example.

Answer 3

Your wrapper needs to be a bit wider for the boxes to have room on the same line. Also you should run the hover function on each box, not their parent, to get them to react individually:

$(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/