javascript - jQuery:鼠标交互 + 简单动画 [img]

Question

我是 jQuery 的新手，所以请在这里和我一起工作。 :)

[网站图片] http://imgur.com/zx803Ct

所以我试图让瓶子在这里与光标交互动画。

目标:我希望悬停的图像出现在前景中，而其余图像缩小到背景中。

意外结果:代码似乎无条件地收缩了所有瓶子。我似乎在“if, then, else”部分遇到了麻烦。

---

过程:

存储“mouseEntered”元素，为每个瓶子做，检查是否匹配，应用效果。

代码:

 $(".sauce_bottle").mouseenter( function(){
        var $active = $(this); //The "entered" image

        //For each (div) bottle, check if "entered", apply effects
        $('.sauce_bottle').each( function(){
            if ( $active == $(this) ) {
            //Shrink
                alert($active.attr("alt"));
                $(this).animate({
                    height: "230px",
                    width: "70px",
                    opacity: ".70"},
                    150);
            } else {
            //or Enlarge
                $(this).animate({
                height: "279px",
                width: "85px",
                opacity: "1"},
                150, function(){});
            }
        });
    });

---

如果我遗漏了一个概念(范围)，或者如果你们有其他方法可以做到这一点，那就太棒了!

谢谢大家! :)

Answer 1

我会这样做:

$(".sauce_bottle").mouseenter( function() {
    $(this).animate({
        height: "279px",
        width: "85px",
        opacity: "1",
    }, 150);

    $(".sauce_bottle").not(this).animate({
        height: "230px",
        width: "70px",
        opacity: ".70",
    }, 150);
});