jQuery - 动画文本从左到右滑动，同时保持始终可见

Question

对于我的网站的移动版本，我需要保持PC版本的不错风格。然而，PC版本包含相当长的字符串，在移动设备上包含2或3行，并导致奇怪的结果。我想要实现的是将文本向左滑动，直到显示最后一个字母，然后再次开始动画，下面是一个示例：

Angular JS

到目前为止，我对jQuery的了解，我认为可以通过动画test string: Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit am | //animation start | amet, consectetur adipis | //50% animation | ectetur adipiscing elit. | //animation end | Lorem ipsum dolor sit am | //animation starts again ---------------------------- | adipiscing elit. | //unwanted behaviour 来完成，但是根据我的标记，padding-right填充被忽略。

jsfiddle markup

代码示例：

white-space: nowrap

Answer 1

<强> DEMO

以下为滚动编写的函数最初取自 this answer ，它为from myFunctions import myFunction myFunction() 文本提供了一个技巧：

scroll

 //this is the useful function to scroll a text inside an element...
  function startScrolling(scroller_obj, velocity, start_from) {
        //bind animation  inside the scroller element
        scroller_obj.bind('marquee', function (event, c) {
            //text to scroll
            var ob = $(this);
            //scroller width
            var sw = parseInt(ob.closest('.text_wrapper').width());
            //text width
            var tw = parseInt(ob.width());
            //text left position relative to the offset parent
            var tl = parseInt(ob.position().left);
            //velocity converted to calculate duration
            var v = velocity > 0 && velocity < 100 ? (100 - velocity) * 1000 : 5000;
            //same velocity for different text's length in relation with duration
            var dr = (v * tw / sw) + v;
            //is it scrolling from right or left?
            switch (start_from) {
                case 'right':
                    console.log('here')
                    //is it the first time?
                    if (typeof c == 'undefined') {
                        //if yes, start from the absolute right
                        ob.css({
                            left: sw
                        });
                        sw = -tw;
                    } else {
                        //else calculate destination position
                        sw = tl - (tw + sw);
                    };
                    break;
                default:
                    if (typeof c == 'undefined') {
                        //start from the absolute left
                        ob.css({
                            left: -tw
                        });
                    } else {
                        //else calculate destination position
                        sw += tl + tw;
                    };
            }
            //attach animation to scroller element and start it by a trigger
            ob.animate({
                left: sw
            }, {
                duration: dr,
                easing: 'linear',
                complete: function () {
                    ob.trigger('marquee');
                },
                step: function () {
                    //check if scroller limits are reached
                    if (start_from == 'right') {
                        if (parseInt(ob.position().left) < -parseInt(ob.width())) {
                            //we need to stop and restart animation
                            ob.stop();
                            ob.trigger('marquee');
                        };
                    } else {
                        if (parseInt(ob.position().left) > parseInt(ob.parent().width())) {
                            ob.stop();
                            ob.trigger('marquee');
                        };
                    };
                }
            });
        }).trigger('marquee');
        //pause scrolling animation on mouse over
        scroller_obj.mouseover(function () {
            $(this).stop();
        });
        //resume scrolling animation on mouse out
        scroller_obj.mouseout(function () {
            $(this).trigger('marquee', ['resume']);
        });
};

//and now the real function with the condition to make your `text scroll`

$(function() {
        $('.text_wrapper').each(function(i, obj) {
            if ($(this).find('.text_overflow').width() > $(this).width()) {
                //settings to pass to function
    			var scroller = $(this).find('.text_overflow'); // element(s) to scroll
    			var scrolling_velocity = 95; // 1-99
    			var scrolling_from = 'right'; // 'right' or 'left'
    			//call the function and start to scroll..
    			startScrolling(scroller, scrolling_velocity, scrolling_from);
            }
        });
});

.text_wrapper{
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
}

.text_overflow {
    word-wrap: none;
    position:relative; /*add this property to the scrolling texts*/
}