Search code examples
javascriptjqueryhtmljquery-animateframeset

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 objects

Solution

  • You can do what you want like this:

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

    I made a quick jsfiddle you can check out here.