Как бы я оживил несколько элементов с помощью if / else

Question

Как бы я оживил несколько элементов с помощью if / else

0

Возможно, я приближаюсь к этому неправильно, и если это так, пожалуйста, не стесняйтесь говорить мне об этом.

Мой вопрос связан с наличием нескольких 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/

Robert 18 апр. 2014, в 05:51

Источник

Теги:

jquery

html

css

1 ответ

Ещё вопросы

David · Accepted Answer · 2014-04-18T02-20-00.000Z

Если вы хотите сделать что-то только для одного div и что-то еще для всех остальных, вы можете назвать их братьями и сестрами, если они являются детьми одного и того же элемента. Например:

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

        //Animate the hovered element

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

        //Animate the others

    }, 100);
});

JSFiddle

Как вы можете видеть в JSFiddle, я также добавил вызов mouseOut, чтобы сжать зависавший div, а также вызов .stop() перед каждым вызовом анимации для прекращения всех запущенных анимаций.

Спасибо Дэвид, это сработало отлично.