Search code examples
jqueryslideup

jQuery slide up two elements - one following the other

I'm trying to slide up two elements (images) one after the other at the same time - so there is no gap between the two.

I thought about using jQuery.animate(), but I couldn't figure out how to move the bottom element at the same time as the animate method is executed.

I'm assuming I'll have to use the position of the first element + its height for the moving position of the second one, but haven't got a clue how to actually make it slide at the same time as the first one.

The container for all of them has relative position and elements are positioned inside absolutely.

I just want to make a simple image / div gallery which scrolls up and don't want to use any plugins.

Any idea?

Solution

  • I have done a quick and dirty solution that shows how this can be done: http://jsfiddle.net/ah2zN/1/

    Overflow hidden is used to prevent them from being rendered outside the slider.