Jquery animate bottom problem

Question

It's strange. I have an animation that start when i .hover on a DIV. Into this div i have another in position absolute that i want to move up until the mouse stay on main div and go down in your position when i go out of main div. A simple hover effect. I have write down this function that work well apart a strange bug.

         var inside = $('.inside')

         inside.hover(function() {
             $(this).children(".coll_base").stop().animate({
               bottom:'+=30px'
             },"slow")
          }, function() {
             $(this).children(".coll_base").stop().animate({
               bottom:'-=30px'
             },"slow");
          });

i need +=30 and -=30 because i have to apply this function to a range of div with different bottom. The problem is that if i hover on and out of div the DIV animate right but when go down he decrease the value of bottom every animation. If i go up and down from the main div i see that the animated div go down even beyond the main div. I think that i miss something to resolve this bug. Thanks for any help

Answer 1

If the bottom is not 0 initially, then you could store the initial bottom value, and use that in the second function. (If the initial bottom is 0, then just use that.)

In the example below, the initial bottom position is stored using the data() attribute for inside, then it is retrieved in the second handler to return to the original position.

Live example: http://jsfiddle.net/VAsZZ/

var inside = $('.inside');

inside.hover(
    function() {
        if(!inside.data('bottom')) {
            inside.data('bottom',$(this).children(".coll_base").css('bottom'));
        }
        $(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow")
    }, 
    function() {
        $(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow");
    }
);​