javascript - How to animate cloned element? -
what want looped horizontaly text slider. attempt - when end of text displayed, clone element move right end , play animation cloned element again - can't achieve because reason cloned element don't want animate.
this chrome app
here 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 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 = $('#elm .inner-elm'); that.animate({right: that.outerwidth()}, settings);
you use css3 transitions simple animation 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: 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>
Comments
Post a Comment