将Cloned Div附加到原始元素的右侧，向左滑动，然后删除原始元素

Question

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

我当前的方法是将父级视口中的绝对定位元素设置为动画，跳转到视口的右侧并向后滑动。这会让元素滑动的错觉。

我有一个想法是克隆幻灯片并将其附加到原始元素的右侧，动画左侧，以便克隆在视图中并删除原始元素。

我已经创建克隆并移除原始但不确定如何将克隆附加到原始元素的右侧。如何做任何想法将不胜感激。

HTML结构

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

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

        <div class="gameBoxContent">
            <!-- Have removed content for 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 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();

Answer 1

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

1. 获取框，将其分配给变量以备将来使用。
2. 克隆它，将其分配给变量以备将来使用。
3. 附加克隆隐藏
4. 将左侧值设置为非画布
5. 设置克隆的动画
6. 显示克隆
7. 设置原始动画
8. 将原稿的左侧值设置为非画布
9. 动画完成后，删除原始

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