悬停时滚动链接文本 - 无尽的选框效果

Question

我正在寻找一种高性能且流畅的解决方案，用于在其内联块框内滚动其文本的链接，如选取框效果。

 $(document).ready(function() {

    

    function scroll(ele){

      var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);

      $(ele).text(s);

    }

    scrollInterval = null;

    function startScrolling(e) {

        if (!scrollInterval) {

            scrollInterval = setInterval(function(){

                scroll(e)

            },100);

        }

    }

    function stopScrolling(e) {

        clearInterval(scrollInterval);

        scrollInterval = null;

    }

    $(".mali").hover(function(){

        startScrolling($(this));

    });

    $(".mali").mouseout(function(){

        stopScrolling($(this));

    });

    $(".mali").mousedown(function(){

        stopScrolling($(this));

    });

  });

.mali {

        display: inline-block;

        background: black;

        color: white;

        padding: 10px;  

      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete.

到目前为止，我的解决方案实际上是我在另一个线程的 stackoverlow 上找到的，并尝试使用它。

不过有两个问题。

1.）由于这基本上是使用间隔来循环单个字母，因此效果不是很平滑。效果是口吃。

有没有人知道如何使这更顺利？也许在那种情况下根本不使用这种方法，也许使用 CSS 过渡来为文本设置动画？

2.）有没有人有一个聪明的解决方案，一旦我悬停如何返回到初始状态？我想要悬停效果，但是当将鼠标从链接上移开时，它应该动画回到初始文本状态。

谢谢，马特

Answer 1

2）您可以保存初始状态，然后将其还原：$(document).ready(function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function scroll(ele){&nbsp; &nbsp; &nbsp; var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);&nbsp; &nbsp; &nbsp; $(ele).text(s);&nbsp; &nbsp; }&nbsp; &nbsp; scrollInterval = null;&nbsp; &nbsp; function startScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; if (!scrollInterval) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e).data("text", $(e).text());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollInterval = setInterval(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scroll(e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },100);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function stopScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(scrollInterval);&nbsp; &nbsp; &nbsp; &nbsp; scrollInterval = null;&nbsp; &nbsp; &nbsp; &nbsp; $(e).text($(e).data("text"));&nbsp; &nbsp; }&nbsp; &nbsp; $(".mali").hover(function(){&nbsp; &nbsp; &nbsp; &nbsp; startScrolling($(this));&nbsp; &nbsp; });&nbsp; &nbsp; $(".mali").mouseout(function(){&nbsp; &nbsp; &nbsp; &nbsp; stopScrolling($(this));&nbsp; &nbsp; });&nbsp; &nbsp; $(".mali").mousedown(function(){&nbsp; &nbsp; &nbsp; &nbsp; stopScrolling($(this));&nbsp; &nbsp; });&nbsp; });.mali {&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; background: black;&nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; transition: all .2s;&nbsp; &nbsp; &nbsp; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete.1）作为一个流畅的动画，我认为这是一个 PoC。也许它会帮助你进一步的想法。$(document).ready(function() {&nbsp; &nbsp; // Those global data could be stored in element's data.&nbsp; &nbsp; var indent = 0,&nbsp; &nbsp; &nbsp; &nbsp; width = 0,&nbsp; &nbsp; &nbsp; &nbsp; padding = 10;&nbsp; &nbsp; function scroll(ele){&nbsp; &nbsp; &nbsp; // Every iteration decrease indent by value&nbsp; &nbsp; &nbsp; indent -= 1;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // If is indent greater than or equal than real width&nbsp; &nbsp; &nbsp; // (width with padding) reset indent.&nbsp; &nbsp; &nbsp; if(-indent >= width+padding)&nbsp; &nbsp; &nbsp; &nbsp; indent = 0;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;// Aplly property&nbsp; &nbsp; &nbsp; $(ele).css("text-indent", indent);&nbsp; &nbsp; }&nbsp; &nbsp; var scrollInterval = null;&nbsp; &nbsp; function startScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; if (!scrollInterval) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Get text and real width&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let text = $(e).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = $(e).width()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Set real width & height, so that container stays&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .width($(e).width())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .height($(e).height())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Save text to data for reset&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .data("text", text)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Add 2 spans with text:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // <span>text</span><span>text</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Where second span has defined padding on the left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .html($("<span>").text(text))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .append($("<span>").text(text).css("padding-left", padding+"px"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;resumeScrolling(e);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function stopScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; pauseScrolling(e);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Reset&nbsp; &nbsp; &nbsp; &nbsp; $(e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Revert real text and reset indent&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .text($(e).data("text"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .css("text-indent", indent = 0);&nbsp; &nbsp; }&nbsp; &nbsp; function pauseScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(scrollInterval);&nbsp; &nbsp; &nbsp; &nbsp; scrollInterval = null;&nbsp; &nbsp; }&nbsp; &nbsp; function resumeScrolling(e) {&nbsp; &nbsp; &nbsp; &nbsp; if (!scrollInterval) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Every 30ms repeat animation. It must be at least 25x per second&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // so it runs smoothly. (So 1 - 40).&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollInterval = setInterval(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scroll(e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },30);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp; $(".mali").hover(function(){&nbsp; &nbsp; &nbsp; &nbsp; startScrolling($(this));&nbsp; &nbsp; });&nbsp; &nbsp; $(".mali").mouseout(function(){&nbsp; &nbsp; &nbsp; &nbsp; stopScrolling($(this));&nbsp; &nbsp; });&nbsp; &nbsp; $(".mali").mousedown(function(){&nbsp; &nbsp; &nbsp; &nbsp; stopScrolling($(this));&nbsp; &nbsp; });&nbsp; &nbsp; $("#start").click(function(){&nbsp; &nbsp; &nbsp; startScrolling($(".mali"));&nbsp; &nbsp; });&nbsp; &nbsp; $("#stop").click(function(){&nbsp; &nbsp; &nbsp; stopScrolling($(".mali"));&nbsp; &nbsp; });&nbsp; &nbsp; $("#pause").click(function(){&nbsp; &nbsp; &nbsp; pauseScrolling($(".mali"));&nbsp; &nbsp; });&nbsp; &nbsp; $("#resume").click(function(){&nbsp; &nbsp; &nbsp; resumeScrolling($(".mali"));&nbsp; &nbsp; });&nbsp; });.mali {&nbsp; display: inline-block;&nbsp; background: black;&nbsp; color: white;&nbsp; padding: 10px;&nbsp; /*&nbsp; This could help, but you can't reset text-indent without animation.&nbsp; transition: all .1s;&nbsp; */&nbsp; overflow: hidden;&nbsp; vertical-align: middle;}/* When you hover element, new span elementscan't take pointer events, so your elementsstays hovered. */.mali span {&nbsp; pointer-events: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Something <a href="#" class="mali">something&nbsp;darkside</a>, Something something complete.<br><br><button id="start">Start</button><button id="stop">Stop</button><button id="pause">Pause</button><button id="resume">Resume</button>这背后的想法是：制作元素overflow:hidden;所以没有文本会溢出设置固定尺寸里面有重复的文字每 x 毫秒更改文本缩进（x < 40 所以它是平滑的，必须至少为 25fps）当它溢出时，将其重置以便它可以处于无限循环