如何将两个 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 幻灯片。

无论如何，有没有办法让它工作，同时仍然维护缓存的对象？

编辑：给div一个类名不会触发动画。我认为这可能与我使用框架集有关。 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

为什么你不向 to 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>