CODEWITHSUNDEEP
javascriptjqueryjquery-animatelayer
Anthony Do
Anthony Do

Reputation: 1419

Jquery - image,animate

I don't know if this will make sense but i will try my best to explain. I currently have image1 which fills the whole x-axis of my screen. I need to use j-query to animate this image so that when i click my button, it will open out(think of someone opening closed curtains, the left and right side will be pulled to the sides) so that image2 will be display.

What im asking is, can j-query animate like this? what is the method/effect called? right now image2 is underneath image1, how can i get image2 to be behind image1? Or would that be the other way around, where image2 needs to be in the html and image1 is layered ontop of it?

note: image1 is a div

Upvotes: 1

Views: 195

Answers (2)

Sampson
Sampson

Reputation: 268482

I think I understand what you're describing. You'll need two elements, placed side-by-side. The left element will show the left 50% of your image, and the right element will show the remaining 50% on the right. You'll then animate these off-screen. The left will go it's full width off to the left, and the right will go its full width off to the right, revealing your image below them.

Single Element:

                                   IMG  Element
+-------------------------------------------------------------------------------+
|                                   FULL IMAGE                                  |
+-------------------------------------------------------------------------------+

Two Elements:

               Element A                                   Element B
+----------------------------------------++-------------------------------------+
|             LEFT 50% IMG             L || R            RIGHT 50% IMG          |
+----------------------------------------++-------------------------------------+
<---- Animate Off Left                                    Animate Off Right ---->

After Animation:

---+-------------------------------------------------------------------------+---
 L |                               Second Image                              | R 
---+-------------------------------------------------------------------------+---

So each image would require two elements to show them. You could construct this as a list like so:

<ul id='slideshow'>
  <li><img src='foo.png' /></li>
  <li><img src='bar.png' /></li>
</ul>

With jQuery you could restructure the list item contents to the following:

<li>
  <div class='left'>
    <img src='foo.png' />
  </div>
  <div class='right'>
    <img src='foo.png' />
  </div>
</li>
<li>
  <div class='left'>
    <img src='bar.png' />
  </div>
  <div class='right'>
    <img src='bar.png' />
  </div>
</li>

At this point you would probably want to set a fixed width and height to the UL that holds all of these list items, and place them at 0,0 with regards to their parent. You would then give each a z-index to layer them one over another.

With jQuery, you would grab the element with the highest z-index and animate its left and right elements off screen, revealing the element with the second-highest z-index. You would then change the z-index of the recently animated element to 1 less than the lowest, and then return its left and right items to their original location.

Then repeat the last steps with your newly-visible list item.

Upvotes: 0

Pranav 웃
Pranav 웃

Reputation: 8477

Do you mean something like this : http://web.enavu.com/demos/dual_sliding_door/

Upvotes: 1

Related Questions