How to animate two jquery objects together
I want to animate two jquery OBJECTS at the same time (using the jquery slideUp
method)
I have two divs that have already been 'cached' into a variable like so:
var div1 = $('body').find('#someId');
var div2 = $('body').find('#someOtherId');
I have cached these because they take a considerable amount of processing to find due to the page layout (using framesets and frames...don't ask).
Anyway,
If I do the slide animation like below, they are not in perfect sync (they are lined up so you can easily see it visually)
div1.slideUp(500);
div2.slideUp(500);
So I tried wrapping it like so,
$(div1, div2).slideUp(500);
but only div1 slides.
Is there anyway to get this to work while still maintaining the cached objects?
Edit: Giving the div's a class name does not trigger the animation. I think it may have something to do with the fact that I'm using framesets. The jquery code is in the top frame and so it will not look into other frames for the class. That is why I cached the object开发者_如何学Cs
You can do what you want like this:
div1.add(div2).slideUp(500);
I made a quick jsfiddle you can check out here.
The shortest thing to do is to use a shared class and then select all the items with that class:
$('.willAnimate').slideUp(500);
<div id="element1" class="willAnimate"></div>
...
<div id="other-element" class="willAnimate"></div>
Otherwise, you could use the .add()
method http://api.jquery.com/add/
In this case your code will become something like this:
div1.add(div2).slideUp(500);
why you dont add a class to the to div and add do the selector like this
<div id="someId" class="example"> </div>
<div id="simeOtherId" class="example"> </div>
the selector that add the animation it's like this
$(".example").slideUp(500);
and that avoid to find some variables and make more selectors
Give the two divs the same class, i.e. slide
and then change your code to $('.slide').slideUp(500)
.
$('.yourclass').slideUp(500);
<div id="someId" class="yourclass"></div>
<div id="simeOtherId" class="yourclass"></div>
精彩评论