如何使用 jquery 为无限循环设置动画？

Question

我一直在尝试使用 jquery animate 来做一个正在运行的文本。 但我似乎无法让它无限循环运行。 它总是只运行一次..

 /* js: */ $(document).ready(function(){ function scroll() { $('.scroll').animate({ right: $(document).width() }, 8000, scroll); } scroll(); });

 /* css： */ .scroll { position: absolute; right: -200px; width: 200px; }

 <!-- html: --> <div class="scroll">This text be scrollin'!</div>

这是演示： https : //jsfiddle.net/y9hvr9fa/1/

大家知道怎么修吗？

Answer 1

这就是我所做的：

1. 像计算水平滚动一样， $(document).width() ，宽度将在下一次迭代中更改

2. 取出width已设置为scroll ，这样的宽度仅为只要内容-你将不得不给white-space:nowrap保持在一条线上的文本。

3. 在animate中，使用$('.scroll').outerWidth()使用scroll文本的宽度

请参阅下面的演示并在此处更新小提琴

 $(document).ready(function() { // initialize var $width = $(document).width(); var $scrollWidth = $('.scroll').outerWidth(); $('.scroll').css({'right': -$scrollWidth + 'px'}); // animate function scroll() { $('.scroll').animate({ right: $width }, 8000, 'linear', function() { $('.scroll').css({'right': -$scrollWidth + 'px'}); scroll(); }); } scroll(); }); 

 body { overflow: hidden; } .scroll { position: absolute; white-space: nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scroll">This text be scrollin'!</div> 

让我知道您对此的反馈，谢谢！

Answer 2

CSS替代：

另外，您也可以在此CodePen中使用CSS过渡： https ://codepen.io/jamesbarnett/pen/kfmKa

更先进：

 $(document).ready(function(){ var scroller = $('#scroller'); // scroller $(Element) var scrollerWidth = scroller.width(); // get its width var scrollerXPos = window.innerWidth; // init position from window width var speed = 1.5; scroller.css('left', scrollerXPos); // set initial position function moveLeft() { if(scrollerXPos <= 0 - scrollerWidth) scrollerXPos = window.innerWidth; scrollerXPos -= speed; scroller.css('left', scrollerXPos); window.requestAnimationFrame(moveLeft); } window.requestAnimationFrame(moveLeft); }); 

 .scroll { display: block; position: absolute; overflow: visible; white-space: nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scroller" class="scroll">This text be scrollin'!</div> 

肮脏的解决方案（我的原始答案）：

在此示例中，这将是一个快速修复：

文本一直在向左运行，而从未停止过。 在这里，您将告诉文本始终从该位置开始。 （时间用完后-不一定意味着刚离开屏幕时）

$(document).ready(function(){
    function scroll() {
      $('.scroll').css('right', '-200px').animate({ 
         right: $(document).width() 
      }, 8000, scroll); 
    }
    scroll();
});

Answer 3

我希望它有用:)

 function start() { new mq('latest-news'); mqRotate(mqr); } window.onload = start; function objWidth(obj) { if (obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0; } var mqr = []; function mq(id) { this.mqo = document.getElementById(id); var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5; var fulwid = objWidth(this.mqo); var txt = this.mqo.getElementsByTagName("span")[0].innerHTML; this.mqo.innerHTML = ""; var heit = this.mqo.style.height; this.mqo.onmouseout = function () { mqRotate(mqr); }; this.mqo.onmouseover = function () { clearTimeout(mqr[0].TO); }; this.mqo.ary = []; var maxw = Math.ceil(fulwid / wid) + 1; for (var i = 0; i < maxw; i++) { this.mqo.ary[i] = document.createElement("div"); this.mqo.ary[i].innerHTML = txt; this.mqo.ary[i].style.position = "absolute"; this.mqo.ary[i].style.left = wid * i + "px"; this.mqo.ary[i].style.width = wid + "px"; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]); } mqr.push(this.mqo); } function mqRotate(mqr) { if (!mqr) return; for (var j = mqr.length - 1; j > -1; j--) { maxa = mqr[j].ary.length; for (var i = 0; i < maxa; i++) { var x = mqr[j].ary[i].style; x.left = parseInt(x.left, 10) - 1 + "px"; } var y = mqr[j].ary[0].style; if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) { var z = mqr[j].ary.shift(); z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px"; mqr[j].ary.push(z); } } mqr[0].TO = setTimeout("mqRotate(mqr)", 20); }

 .marquee { position: relative; overflow: hidden; text-align: center; margin: 0 auto; width: 100%; height: 30px; display: flex; align-items: center; white-space: nowrap; } #latest-news { line-height: 32px; a { color: #555555; font-size: 13px; font-weight: 300; &:hover { color: #000000; } } span { font-size: 18px; position: relative; top: 4px; color: #999999; } }

 <div id="latest-news" class="marquee"> <span style="white-space:nowrap;"> <span>&nbsp;&nbsp;&bull;</span> <a href="/">one Lorem ipsum dolor sit amet</a> <span>&nbsp;&nbsp;&bull;</span> <a href="/">two In publishing and graphic design</a> <span>&nbsp;&nbsp;&bull;</span> <a href="/">three Lorem ipsum is a placeholder text commonly</a> </span> </div>

Answer 4

我一直在尝试使用 jquery animate 来做一个正在运行的文本。

您知道<marquee> HTML 元素有效，对吗？

这意味着你不需要CSS，Javascript或jQuery的。

---

纯 HTML 解决方案：

 <marquee>This text be scrollin'!</marquee>

---

<marquee>元素包含大量可选的声明性属性，用于控制滚动文本的行为：

• 行为
• 背景色
• 方向
• 高度
• 空间
• 环形
• 滚动量
• 滚动延迟
• 真速
• 虚拟空间
• 宽度

---

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

注 1：

上面的资源正确地指出：

不再推荐此功能。 虽然一些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能只是为了兼容性目的而保留。

笔记2

同一资源还建议：

请参阅本页底部的兼容性表以指导您的决定

并且……粗略地看一下兼容性表， 可以看出<marquee>元素与当今存在的最成熟、与浏览器兼容的元素一样与浏览器兼容。

Answer 5

这怎么样？

 .scroll { height: 50px; overflow: hidden; position: relative; } .scroll p{ position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); -moz-animation: scroll 8s linear infinite; -webkit-animation: scroll 8s linear infinite; animation: scroll 8s linear infinite; } @-moz-keyframes scroll { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll { 0% { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

 <div class="scroll"><p>This text be scrollin'!</p></div>