Как анимировать два объекта jquery вместе

Question

Я хочу анимировать два объекта jquery одновременно (используя метод jquery slideUp)

У меня есть два div, которые уже были «кэшированы» в переменную, например:

var div1 = $('body').find('#someId');
var div2 = $('body').find('#someOtherId');

Я их кэшировал, потому что они требуют значительного объема обработки из-за разметки страницы (используя наборы кадров и кадры ... не спрашивайте).

Во всяком случае,

Если я выполняю анимацию слайдов, как показано ниже, они не идеально синхронизированы (они выстроены в линию, поэтому вы можете легко увидеть их визуально)

div1.slideUp(500);
div2.slideUp(500);

Итак, я попытался обернуть его так,

$(div1, div2).slideUp(500);

но только слайды div1.

Есть ли способ заставить это работать, сохраняя кэшированные объекты?

Редактировать: Присвоение имени диву имя класса не вызывает анимацию. Я думаю, что это может быть связано с тем, что я использую наборы кадров. Код jquery находится в верхнем фрейме, поэтому он не будет искать другие фреймы для класса. Вот почему я кешировал объекты

Answer 1

Вы можете делать то, что вы хотите, как это:

div1.add(div2).slideUp(500);

Я сделал быстрый jsfiddle, вы можете проверить здесь .

Answer 2

Самое короткое, что нужно сделать - это использовать общий класс, а затем выбрать все элементы этого класса:

$('.willAnimate').slideUp(500);
<div id="element1" class="willAnimate"></div>
...
<div id="other-element" class="willAnimate"></div>

В противном случае вы можете использовать метод .add() http://api.jquery.com/add/

В этом случае ваш код станет примерно таким:

div1.add(div2).slideUp(500);

Answer 3

почему вы не добавляете класс в div и добавляете селектор вот так

<div id="someId" class="example"> </div>
<div id="simeOtherId" class="example"> </div>

селектор, который добавляет анимацию, вот так

$(".example").slideUp(500);

и это позволяет избежать поиска некоторых переменных и сделать больше селекторов

Answer 4

$('.yourclass').slideUp(500);

<div id="someId" class="yourclass"></div>
<div id="simeOtherId" class="yourclass"></div>

Answer 5

Дайте двум div одинаковый класс, т.е. slide, а затем измените свой код на $('.slide').slideUp(500).