如何制作克隆元素的动画？

Question

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);

Answer 1

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>