Jquery animate bottom issue

Question

This is strange. I have an animation that starts when I'm on a DIV. In this div, I have another absolute position that I want to move up until the mouse remains on the main div and goes down to your position when I exit the main div. Simple hover effect. I am recording this function that works fine with an unusual error.

         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 divs with a different bottom. The problem is that if I find and exit the div, the DIV animates to the right, but when it goes down, it reduces the value of the bottom animation. If I go up and down from the main div, I can see that the animated div goes down even beyond the main div. I think I missed something to solve this error. Thanks for any help

Answer 1

bottom 0 , . ( bottom 0, .)

bottom data() inside, .

: 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");
    }
);​

Answer 2

, (- = 30px + = 30px) , , . each() , .