如何将两个jquery对象动画在一起

Question

我想同时为两个jquery OBJECTS设置动画（使用jquery slideUp方法）

我有两个已经“缓存”到一个变量中的div：

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

我已经缓存了这些因为页面布局需要大量的处理才能找到（使用框架集和框架......不要问）。

反正

如果我像下面那样进行幻灯片动画，它们不是完全同步的（它们排成一行，这样你就可以直观地看到它）

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

所以我试着像这样包装它，

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

但只有div1幻灯片。

是否仍然可以在保持缓存对象的同时使其工作？

编辑：给div一个类名不会触发动画。我认为这可能与我使用框架集的事实有关。 jquery代码位于顶部框架中，因此它不会查看该类的其他框架。这就是我缓存对象的原因

Answer 1

最简单的方法是使用共享类，然后选择该类的所有项目：

$('.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 2

你可以这样做你想做的事：

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

我做了一个快速的jsfiddle你可以查看here。

Answer 3

为什么你不向div添加一个类并添加像这样的选择器

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

添加动画的选择器就像这样

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

并避免找到一些变量并制作更多选择器

Answer 4

将两个div分配给同一个类，即slide，然后将代码更改为$('.slide').slideUp(500)。

Answer 5

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

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