What i want to do is looped horizontaly text slider. My attempt - when end of text is displayed, clone this element move to right end and play animation for cloned element again - but i can't achieve that because for some reason cloned element don't want to animate.
This is chrome only app
Here is jsfiddle .
CSS
#elm {
width: 100px;
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:absolute;
white-space: nowrap;
}
HTML
<div id="elm">
<div class="inner-elm"> 11111111 2222222 333333 4444444</div>
</div>
JS
var elm_right = $('#elm').offset().left + $('#elm').outerWidth();
var settings = {
duration: 5000,
easing: 'linear',
step: function() {
var this_right = $(this).offset().left + $(this).outerWidth();
// make some clone
if(!$(this).hasClass('cloned') && ((this_right + 50) < elm_right)) {
$(this).addClass('cloned');
var clone = $(this).clone(true);
clone.addClass('cloned')
.css('left', $('#elm').width())
.appendTo('#elm')
.animate({right:100}, settings);
}
// remove parent
if( (this_right - 20) < $('#elm').offset().left) {
$(this).remove();
}
}
};
var that = $('#elm .inner-elm');
that.animate({right: that.outerWidth()}, settings);
You could use CSS3 transitions for a simple animation like this. fiddle
var interval = 2000; var nextTimeout = 200; var wrapper = $('#elm'); var elem = $('.inner-elm', wrapper); elem.addClass('move'); setInterval(function(){ var clone = elem.clone(true); elem.remove(); elem = clone; elem.removeClass('move'); wrapper.append(elem); setTimeout(function(){ elem.addClass('move'); }, nextTimeout); }, interval);
#elm { height:20px; overflow: auto; overflow-y: hidden; position:absolute; top:10px; left:10px; } .inner-elm{ transition: all 2s linear; -ms-transform: translate(110%, 0); /* IE 9 */ -webkit-transform: translate(110%x, 0); /* Safari */ transform: translate(110%, 0); } .move{ -ms-transform: translate(-130%, 0); /* IE 9 */ -webkit-transform: translate(-130%, 0); /* Safari */ transform: translate(-130%, 0); } #elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; } #elm .inner-elm { position:relative; white-space: nowrap; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="elm"> <div class="inner-elm">Stackoverflow</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.