Question

也许我接近这个错误，如果是这样的话，请不要犹豫告诉我。

我的问题与包含在容器元素中的4x3模式中的几个div有关。目标是将鼠标悬停在一个元素上，为其分配一个类，并使其变大，同时使容器中的所有其他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做一些事情，而对其他所有人做一些其他事情，如果他们是同一个元素的孩子，你可以称他们为兄弟姐妹。例如：

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

        //Animate the hovered element

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

        //Animate the others

    }, 100);
});

JSFiddle

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

我如何使用if / else为几个元素设置动画

1 个答案:

JSFiddle