Элемент не возвращается в исходное положение?

Question

У меня есть элемент с bottom: 10. Я хочу, чтобы он изменился на 20, пока он парил на нем. И вернуться к 10 на мышь из:

$('.home-box-caption a').hover(function() { 
    $('.home-box-caption a').animate({ 
    bottom: 20 
    }, 200, function() { 
    bottom: 10 
    }); 
}); 

Прямо сейчас это просто остаются в 20.

Что я делаю не так?

Answer 1

Вы не совсем используете .hover() правильно.

.hover(function[, function])

var $targets = $('.home-box-caption').find('a'); 
$targets.hover(function() { 
    $(this).animate({ 
    bottom: 20 
    }, 200); 
}, function(){ 
    $(this).animate({ 
    bottom: 10 
    }, 200); 
}); 

Рассмотрите возможность использования this ключевого слова (если ваши намерения не анимировать все a элементы под .home-box-caption), или хранить эти элементы в переменной, поэтому вам не придется повторный запрос DOM-каждый раз ,

Подробнее: http://api.jquery.com/hover/

Answer 2

Вы хотели бы оживить элемент обратно на отведении указателя мыши с помощью 2-го параметра Hover в этом, как

 $('.home-box-caption a').hover(function() { 
      $(this).animate({ 
       bottom: 20 
      }, 200) 
     }, function() { 
      $(this).animate({ 
       bottom: 10 
      }, 200) 
     }); 

Answer 3

Вы должны поместить вторую анимацию в качестве второго аргумента hover:

$('.home-box-caption a').hover(
    function(){ 
    //this is invoked when the mouse ENTERS the element 
    $(this).animate({top: 140}, 200); 
    }, 
    function(){ 
    //this is invoked when the mouse LEAVES the element 
    $(this).animate({top: 150}, 200); 
    } 
); 

(http://jsfiddle.net/fnpuC/)

Метод hover поддерживает обратные вызовы: .hover(handlerIn(eventObject), handlerOut(eventObject)). См. http://api.jquery.com/hover/

Первый будет вызываться, когда мышь входит в элементы, вторая, когда она покидает элемент.

Метод animate также поддерживает обратный вызов: .animate(properties [, duration ] [, easing ] [, complete ]), но этот вызов complete будет вызываться, когда первая анимация будет завершена.