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回调。

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

3 个答案: