Jquery одушевленная проблема дна

Question

Странно. У меня есть анимация, которая начинается, когда я нахожусь на DIV. В этот div у меня есть еще один в абсолютном положении, который я хочу перемещать вверх, пока мышь не останется на главном div и не опустится в вашем положении, когда я выйду из основного div. Простой эффект парения. Я записал эту функцию, которая хорошо работает, кроме странной ошибки.

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

Мне нужно + = 30 и - = 30, потому что я должен применить эту функцию к диапазону div с другим основанием. Проблема заключается в том, что если я наведите курсор мыши на элемент div и выйдет из него, то при анимации DIV он уменьшит значение bottom при каждой анимации. Если я поднимаюсь и опускаюсь от основного деления, я вижу, что оживший деливок идет даже дальше основного деления. Я думаю, что я что-то упустил, чтобы решить эту ошибку. Спасибо за любую помощь

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 () в соответствующем наборе, вычислять правильные смещения и передавать значения непосредственно в функцию наведения.