悬停上的滚动链接文本-无尽的字幕效果

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。）有人悬停时，如何对返回初始状态有一个聪明的解决方案吗？我希望对鼠标悬停有效果，但是当将鼠标移离链接时，它应该动画化回初始文本状态。

谢谢，马特

我正在寻找一种性能出色且平滑的解决方案，以使链接像字幕效果一样在其内嵌块框中滚动其文本。 $（document）.ready（function（）{function ...

Answer 1

2）您可以保存初始状态，然后将其还原：