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);
});