jQuery没有动画

jQuery not animating back up

本文关键字：动画 jQuery      更新时间：2023-09-26

我有一个框，它应该在点击时淡入并向上移动，但相反，它只是停留在下面。褪色作品

谢谢你的帮助!

var fadeInDown = function (element, duration, easing) {
  element.css({
    opacity: '0',
    webkitTransform: 'translateY(100%)',
    transform: 'translateY(100%)',
  })
  .animate({
    opacity: '1',
    webkitTransform: 'translateY(0%)',
    transform: 'translateY(0%)',
  }, duration, easing);
};
$('.box').click(function () {
  fadeInDown($('.box'), 400, 'swing');
});
body {
  display: flex;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

jQuery的animate不支持这样的css变换。你需要引入阶跃函数，让它动起来。这应该是你想要的:

var fadeInDown = function (element, duration, easing) {
  element.css({
    opacity: '0',
    webkitTransform: 'translateY(0%)',
    transform: 'translateY(0%)',
  })
  .animate({
    opacity: '1'
  }, {
    duration: duration,
    step: function(now, fx) {
      var step = 100*now;
      $(this).css({
        webkitTransform: 'translateY(' + step + '%)',
        transform: 'translateY(' + step + '%)'
      });
    }
  }, easing);
};
$('.box').click(function () {
  fadeInDown($('.box'), 400, 'swing');
});
body {
  display: flex;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

还有，看一下这个问题，它可能会给你一些额外的帮助。

相关文章：