![](/img/trans.png)
[英]CSS3 transition-timing-function as javascript function
[英]Reset CSS3 timing function with JS
当幻灯片到达第二个“ 1”时,我需要它无缝地重置为幻灯片“ 2”,并给人以无限旋转木马的印象,
演示:
http://jsfiddle.net/benhowdle89/cWTbn/
编码:
$('.wrapper li:first').clone().appendTo($('.wrapper ul'));
var element = $('.wrapper')[0];
element.setAttribute('data-left', 0);
setInterval(function() {
var mL = +element.getAttribute('data-left'), t = +$('.wrapper').css('width').replace('px', ''), w = +$('.wrapper li:first').outerWidth();
if(t == (Math.abs(mL) + w)){
element.style.webkitTransitionTimingFunction = "none";
element.style.webkitTransform = "none";
element.setAttribute('data-left', 0);
}
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
var currentL = +element.getAttribute('data-left');
var newL = +(currentL + w);
element.style.webkitTransform = "translate3d(-" + (newL) + "px, 0, 0)";
element.setAttribute('data-left', newL);
}, 2000);
问题:
在幻灯片“ 1”之后,它会动画返回幻灯片“ 2”,因此我不需要这样做,而是要向后滑动到幻灯片“ 2”(对用户不可见),
有任何想法吗?
将动画移到单独的类。 由于您已经在使用jQuery,因此可以使用以下代码:
$('.animiationClass').removeClass('animationClass').addClass('animationClass');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.