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

Question

我有一排五个盒子。当您单击除第一个以外的任何一个时，单击的框会淡出，它之前的框会向右滑动，并且新的框会出现在最左侧作为新的第一个元素。

1) 我不想在正文前加上带有“primaryfade”、“primary”和“box”类的 div，而是在前面加上我刚刚单击的元素，没有类“淡出”，但有新的类“primary”和“primary-fade”(同时仍然保留类“box”)。

2) 在我的 fiddle 中，我意识到任何以前具有“主要”类然后移动到非第一个位置的框如果再次单击则不再触发动画。我不知道为什么会这样，但我希望任何元素都能在点击时移回第一个位置。

我确信我的 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);
});
});

Answer 1

我同意 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);

这将:

• 在您点击的当前元素前面添加
• 删除淡出类
• 添加 primary 和 primaryfade 和 box 类
• 将文本更新为"new"