jquery - 元素没有回到原来的位置？

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

您可能希望使用鼠标悬停的第二个参数像这样在鼠标悬停时为元素设置动画

        $('.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当第一个动画完成时，将调用此回调。