Question

我有一个应该在点击时淡入并向上移动的盒子，但是它只是保持向下。褪色工作......

感谢您的帮助！

＆＃13;

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');
});

＆＃13;

body {
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

＆＃13;

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

＆＃13;

Answer 1

jQuery的动画不支持这样的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>

另外，请查看this question，这可能会为您提供一些额外的帮助。

jQuery没有动画备份

1 个答案: