Question

我真的不知道自己做错了什么，我已经在这里看了一些关于动画填充顶部的其他问题，我已经尝试了所有这些但是似乎没什么为我工作，所以我错过了一些错误。控制台没有错误。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我确实在控制台中遇到错误。您似乎遇到语法错误（在function()的第一个参数中忘记了hover()。请尝试此操作：

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

Answer 2

差不多了。注意第二行的function() ......

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您想多次悬停/放出多个动画，则需要在触发动画之前添加.stop() ...

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: