javascript - Append Cloned Div to right side of original element, slide left, then remove original -

i creating ajax slider 1 "slide" thats data reloads during slide.

my current method animate absolute positioned element out of parent viewport, jump right hand side of viewport , slide in. gives illusion of element sliding.

i have idea of cloning slide , appending right hand side of original element, animating left clone in view , removing original element.

i have got far creating clone , removing original unsure of how append clone right hand side of original element. thoughts on how appreciated.

html structure

<!-- relative parent --> <div id="gameboxwrap">      <!-- slide -->     <div class="gamebox">          <div class="gameboxcontent">             <!-- have removed content readability -->         </div>      </div>   </div> 

css

#gameboxwrap {     position: relative;     overflow: hidden;     width: 100%;     height: 700px;  }  .gamebox {   position: absolute;   top: 2px;   left: 1px;   width: 938px;   height: 690px;   padding: 20px; } 

js

// // creates clone of element - trying append clone right hand side of original element  var $el = $('.gamebox'); $el.clone(true).appendto('#gameboxwrap');  //     current settings below follows: // //      1. slide element out of relative parent viewport //      2. jump element right hand edge of parent viewport //      3. slide element orignal position // // //      thought pattern ideal process // //      1. wait clone appended on right hand side //      2. slide left original element out of viewport //      3. remove orginal element  var settings =  [     [     {"left": "-950px"},{duration: 400,complete: function() {$(this).css("left", window.innerwidth + $(this).width());}}     ],     [     {"left": "1px"}, {duration: 400}    ] ];  $(".gamebox").queue("_fx", $.map(settings, function(options, i) {   return function(next) {     return $(this).animate.apply($(this), options).promise().then(next);   }; })).dequeue("_fx");   // removes original element $el.remove(); 

replace javascript section following code. here's breakdown

1. get box, assign variable future use.
2. clone it, assign variable future use.
3. append the clone hidden
4. set left value off canvas
5. set animation of clone
6. show clone
7. set animation of original
8. set left value of original off canvas
9. after animation has finished, remove original

var el = $('.gamebox'); var elnew = el.clone(true); $('#gameboxwrap').append(elnew.hide()); elnew.css('left', '100%'); elnew.show(); el.css('transition', 'left 1s ease-in-out'); el.css('left','-100%'); elnew.css('transition', 'left 1s ease-in-out'); elnew.css('left','0px'); window.settimeout(function(){     el.remove(); },1000);