javascript - 使用jQuery将元素移动/复制到另一个位置

我有一排五个盒子。当您单击除第一个元素以外的任何元素时，被单击的框会逐渐消失，之前的框会向右滑动，然后在最左侧出现一个新框作为新的第一个元素。

1）与其在主体上添加“ primaryfade”，“ primary”和“ box”类的div，不如在我刚刚单击的元素前添加“ fade-out”类而不添加新类“ primary” ”和“主渐变”（同时仍保留“框”类）。

2）在我的小提琴中，我意识到，以前具有“主要”类然后移到非第一位置的任何框，如果再次单击，将不再触发动画。我不知道为什么，但是无论如何，我都希望任何元素都可以回到点击的第一位置。

我确信我的jQuery可以写得更优雅。我对它不是很有经验。这是为了概念验证。

http://jsfiddle.net/q6rtgh79/3/

HTML-

<div class="primary box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

CSS-

body {border:1px solid;}

.box {color:white;font-weight:bold;transition: opacity 1s, background 1s;display:inline-block;width: 40px;height:40px;background: gray;margin-left: 20px;}

.box:first-child {margin:0;}

.box4 {background: pink;}

.allmove .box {transition: transform .5s ease-in-out;transform: translate3d(150%,0,0);}

.allmove .fade-out ~ .box, .primary, .primary ~ .box {
transform: translate(0,0)!important;}

.primary {background:green;}

.fade-out, .primaryfade {opacity: 0;}

jQuery-

$(function() {
$(".box:not(:first-child)").click(function() {
  $(this).addClass("fade-out");

  $(".primary").removeClass("primary");

  setTimeout(function() {
    $("body").addClass("allmove");
  }, 1000);

    setTimeout(function() {
        $("body").prepend("<div class=\"primaryfade primary box\">new</div>");
  }, 1500);

  setTimeout(function() {
    $("div[class*='fade-out']").remove();
  }, 1500);

  setTimeout(function() {
      $("body").removeClass("allmove");
  }, 1500);

  setTimeout(function() {
      $("[class*='primaryfade']").removeClass("primaryfade")
  }, 2000);
});
});

最佳答案

我同意罗汉（Rohan）的观点，但是要解决您的第一点，“我宁愿添加刚刚单击的元素”，而不是

setTimeout(function () {
        $("body").prepend("<div class=\"primaryfade primary box\">new</div>");
        $("div[class*='fade-out']").remove();
        $("body").removeClass("allmove");
    }, 1500);

采用

var item = $(this);
    setTimeout(function (item) {
       $("body").prepend(item.removeClass('fade-out').addClass('primaryfade').addClass('primary').addClass('box').html('new'));
        $("div[class*='fade-out']").remove();
        $("body").removeClass("allmove");
    }, 1500, item);

这将：


在您单击的当前项目之前
删除fade-out类
添加primary和primaryfade和box类
将文字更新为“新”

关于javascript - 使用jQuery将元素移动/复制到另一个位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27439608/