jQuery Animate旋转和滚动文本中间速度很快但结束时速度较慢

我正在使用jquery动画功能来为我的文本设置动画，并且还想旋转文本如果度数已通过或0度表示没有旋转，所以我使用了以下代码：jQuery Animate旋转和滚动文本中间速度很快但结束时速度较慢

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/

但它是快于中部和减慢时结束，但我想它有相同的速度所有的时间。不明白这个问题？此外，旋转90度以上的另一个问题是将文本从框中隐藏起来。

感谢

来源

2017-06-16 Bhumi Shah

的片段或小提琴会更有助于回答这个问题。 –

好吧，让我创建小提琴！ –

@RohanKumar：更新！ –

那是因为你逝去的生命的选项，第二个参数.animate()，所以第三个参数'linear'将在这里没有任何意义，因此默认swing宽松政策适用于它。所以解决这个添加easing:'linear'在第二个参数类似的选项，

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();

.block { 
 
    position: absolute; 
 
    float: left; 
 
    font-size: 50px; 
 
    background-color: red; 
 
} 
 

 
.parent { 
 
    width: 500px; 
 
    height: 50px; 
 
    border: solid; 
 
    position: absolute; 
 
    overflow: hidden 
 
}

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

来源

2017-06-16 12:13:54

但旋转不适用于宽度。如何旋转？ –

为90deg它不是从顶部开始：0 –

有没有解决方案？ –

这里只有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>

来源

2017-06-16 12:33:28 Raj

jQuery Animate旋转和滚动文本中间速度很快但结束时速度较慢

回答

相关问题