jquery - 我将如何使用 if/else 为多个元素设置动画

Question

也许我处理这个问题有误，如果是这样，请不要犹豫告诉我。

我的问题与将多个 div 以 4x3 模式包裹在容器元素中有关。目标是将鼠标悬停在一个元素上，为其分配一个类，并使其变大，同时使容器中的所有其他 div 变小并且没有类。

    $("#portChoose > div").hover(function () {
    $(this).addClass("onTarget");
    if( $(this).hasClass("onTarget") ){
        $(this).animate({"width": "40px","height": "40px"}, 100);
    } else {
        $("#portChoose > div").animate({"width": "30px","height": "30px"}, 100);
    }
}, function(){
   $(this).removeClass("onTarget");                
});

这是做这类事情的正确方法吗？如果不是，哪种方法是处理此类场景的最佳方法？

我已经链接了我本来可以工作但没有成功的东西。任何帮助甚至洞察力将不胜感激。谢谢!

JSFiddle:http://jsfiddle.net/rlvassallo/wyjf5/

Answer 1

如果你想只对一个 div 做某事，而对所有其他的 div 做某事，你可以称它们为 sibling ，前提是它们是同一元素的子元素。例如:

$("#portChoose > div").hover(function(){
    $(this).animate({

        //Animate the hovered element

    }, 100).siblings("div").animate({

        //Animate the others

    }, 100);
});

JSFiddle

正如您在 JSFiddle 中看到的，我还添加了一个 mouseOut 调用来缩小悬停的 div 以及对 .stop() 的调用。在每个动画调用之前终止任何正在运行的动画。