Question

我正在使用jquery animate函数为我的文本设置动画，并且如果经过度数或者0度意味着没有旋转也想要旋转文本，所以我使用了以下代码：

var leftCss = "-"+$('#mydiv').width();
var leftAnt = $('#mydiv').parent().width();
$('#mydiv').each(function () {this.xpos =  leftCss; })
           .animate({  xpos: leftAnt}, {
                duration:10000,
                step: function (now) { 
                   var scaleVal =parseInt( now);
                   $(this).css('transform','rotate(0deg) translateX('+scaleVal+'px) translateY('+$('#mydiv').height()+'px)'); 
                },
            },'linear');

https://jsfiddle.net/nufafjjs/1/

但是它在中间很快并且在结束时减速但我希望它始终以相同的速度。不明白这个问题？另外，还有一个问题是旋转＆gt; 90度隐藏文本框。

感谢

Answer 1

这是因为您在.animate()中将动画选项作为第二个参数传递，因此第三个参数'linear'在这里没有任何意义，因此默认swing缓动应用于它。因此，要解决此问题，请在第二个选项参数中添加easing:'linear'，例如

＆＃13;

function animateScroll() {
  $(".block").each(function() {
    this.offsetX = '-' + $('.block').width();
  }).animate({
    offsetX: parseInt($('.parent').width())
  }, {
    duration: 10000,
    step: function(now, fx) { //console.log(now)
      var scaleVal = parseInt(now);
      scaleVal += 10;
      $(this).css('transform', 'rotate(0deg) translateX(' + scaleVal + 'px) translateY(0px)');
    },
    complete: function() { //console.log('in complate')
      return animateScroll();
    },
    easing: 'linear' // add easing here
  });
}
animateScroll();

＆＃13;

.block {
  position: absolute;
  float: left;
  font-size: 50px;
  background-color: red;
}

.parent {
  width: 500px;
  height: 50px;
  border: solid;
  position: absolute;
  overflow: hidden
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="block">some content here....</div>
</div>

＆＃13;

Answer 2

这是一个只有css动画的简单解决方案。您需要animation-timing-function:linear才能使动画保持恒定速度。您可以通过更改animation-duration值来更改动画的速度。

.block {
  position: absolute;
  float: left;
  font-size:50px;
  background-color: red;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function:linear;
  animation-iteration-count: infinite;
  
  //or just a shorthand
  //animation: example 6s linear infinite;
}
  
@keyframes example {
  from {transform:translateX(-500px);}
  to {transform:translateX(500px);}
}
.parent{
  width:500px;
  height: 50px;
  border:solid; 
  position: absolute;
  overflow:hidden
}

<div class="parent">
<div class="block">some content here....</div>

jQuery Animate在中间快速旋转和滚动文本，但在结束问题时减慢速度

2 个答案: