JQuery悬停动画

我有一个Jquery新手问题：

这是我的小提琴：

以下是我需要完成的工作：

我的悬停有问题：

您会注意到，下方的颜色框在悬停时都会更改不透明度

---

特定子div（类为“box”）的不透明度应更改为.5，即它现在的状态。即使我只将鼠标悬停在一个子div上，所有子div的不透明度都在更改。

为什么不直接将效果应用于div，而不是针对父div

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

另外，.wrap元素上的宽度太窄，这就是为什么框没有并排出现的原因

---

为什么不直接对div应用效果，而不是针对父级

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

另外，.wrap元素上的宽度太窄，这就是为什么框没有并排出现的原因

---

您的包装需要再宽一点，这样箱子才能在同一条线上有空间。此外，还应在每个框（而不是它们的父框）上运行悬停函数，以使它们单独作出反应：

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

---

您的包装纸需要再宽一点，这样箱子才能在同一条线上有空间。此外，还应在每个框（而不是它们的父框）上运行悬停函数，以使它们单独作出反应：

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

这是一个工作演示，您不需要Javascript来实现此效果，请查看代码：）

HTML代码

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

​

​JS代码

// absolutely none ! :)

这是一个可以工作的演示，您不需要Javascript来实现此效果，请查看代码：）

HTML代码

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

​

​JS代码

// absolutely none ! :)

---

为什么不改用CSS呢？检查我下面的答案：）那么，在这种情况下，您必须了解哪些情况下需要Javascript（和jQuery），哪些情况下不需要。在这里，它根本不是必需的，而且CSS解决方案的性能要比Javascript解决方案好得多：）顺便说一句，它的拼写是

jQuery

：）为什么不改用CSS呢？检查我下面的答案：）那么，在这种情况下，您必须了解哪些情况下需要Javascript（和jQuery），哪些情况下不需要。在这里，它根本不是必需的，CSS解决方案的性能比Javascript解决方案要好得多：）顺便说一句，它的拼写是

jQuery

：）