Javascript 将克隆的Div追加到原始元素的右侧，向左滑动，然后删除原始元素

我正在创建一个ajax滑块，其中只有一个“幻灯片”，用于在幻灯片中重新加载数据

我当前的方法是在父视口外设置绝对定位元素的动画，跳到视口的右侧并滑回。这给了元素滑动的错觉

我有一个想法，克隆幻灯片，并将其附加到原始元素的右侧，设置左侧动画，以便可以看到克隆，并删除原始元素

我已经创建了克隆并删除了原始元素，但不确定如何将克隆附加到原始元素的右侧。任何关于如何做到这一点的想法都将不胜感激

HTML结构 JS

---

用以下代码替换javascript部分。这是故障

获取该框，将其分配给变量以供将来使用

克隆它，将其分配给变量以备将来使用

将克隆添加到隐藏的克隆

将左值设置为“离开画布”

设置克隆的动画

显示克隆

设置原始对象的动画

将原稿的左值设置为离开画布

动画完成后，删除原始动画

var el=$（'.gameBox'）；
var elNew=el.clone（真）；
$（'#gameBoxWrap'）.append（elNew.hide（））；
css（'left'，'100%'）；
elNew.show（）；
el.css（'transition'，'left 1s ease in out'）；
el.css（'左'，'-100%）；
css（'transition'，'left 1s ease in out'）；
css（'left'，'0px'）；
setTimeout（函数（）{
el.移除（）；
},1000);

这是正确的定位，如果您能帮助我将其集成到脚本中，以便将克隆定位到右侧或原始位置，我应该能够制作出幻灯片。这非常完美，我只需要对其进行裁剪，以便原始div与新div一起左移，就像普通幻灯片一样。这太棒了！我试图微调幻灯片的时间，以便在两张幻灯片都看不见时加载ajax内容。我相信我可以与你的答案，但任何建议将不胜感激。我应该编辑我的答案与整个插件脚本或你想创建一个聊天室？

<!-- Relative Parent -->
<div id="gameBoxWrap">

    <!-- The Slide -->
    <div class="gameBox">

        <div class="gameBoxContent">
            <!-- Have removed content for readability -->
        </div>

    </div>  
</div>

#gameBoxWrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 700px; 
}

.gameBox {
  position: absolute;
  top: 2px;
  left: 1px;
  width: 938px;
  height: 690px;
  padding: 20px;
}

//
// CREATES A CLONE OF ELEMENT - I am trying to append the clone to the right hand side of the original element

var $el = $('.gameBox');
$el.clone(true).appendTo('#gameBoxWrap');

//     The current settings below are as follows:
//
//      1. Slide Element out of relative parent viewport
//      2. Jump Element to right hand edge of parent viewport
//      3. Slide Element to orignal position
//
//
//      My thought pattern for ideal process
//
//      1. Wait for clone to be appended on right hand side
//      2. Slide left so Original Element is 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();