使用 jQuery 悬停和动画动画填充顶部

Question

我真的不知道我做错了什么，我已经查看了这里关于动画填充顶部的其他一些问题，我已经尝试了所有这些问题，但似乎对我没有任何作用，所以有我缺少某种错误。控制台没有错误。

$(document).ready(function() {
  $('.target-div').hover({
    $(this).animate({
      paddingTop: '+=5em'
    }, 500);
  }, function() {
    $(this).animate({
      paddingTop: '0em'
    }, 500);
  });
});

.target-div {
  background: #337ab7;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="target-div">One</div>
<div class="target-div">Two</div>
<div class="target-div">Three</div>

Answer 1

我确实在控制台中收到错误消息。看来你有一个语法错误（你在 hover() 的第一个参数中忘记了 function()。试试这个：

$(document).ready(function() {
  $('.target-div').hover(function() {
    $(this).animate({
      paddingTop: '+=5em'
    }, 500);
  }, function() {
    $(this).animate({
      paddingTop: '0em'
    }, 500);
  });
});

Answer 2

几乎拥有它。注意第二行的 function()...

$(document).ready(function() {
  $('.target-div').hover(function(){
    $(this).animate({
      paddingTop: '+=5em'
    }, 500);
  }, function() {
    $(this).animate({
      paddingTop: '0em'
    }, 500);
  });
});

.target-div {
  background: #337ab7;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="target-div">One</div>
<div class="target-div">Two</div>
<div class="target-div">Three</div>

如果你想避免多次悬停 in/out 时出现多个动画，你需要在触发动画之前添加 .stop()...

$(document).ready(function() {
  $('.target-div').hover(function(){
    $(this).stop().animate({
      paddingTop: '+=5em'
    }, 500);
  }, function() {
    $(this).stop().animate({
      paddingTop: '0em'
    }, 500);
  });
});

.target-div {
  background: #337ab7;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target-div">One</div>
<div class="target-div">Two</div>
<div class="target-div">Three</div>

使用 jQuery 悬停和动画动画填充顶部

animating padding top using jQuery hover and animate

jquery

jquery-animate