使用jQuery单击时将元素移动/复制到另一个位置

Move/duplicate an element to another place on click with jQuery

本文关键字：复制 另一个 位置 移动 元素 jQuery 单击 使用      更新时间：2023-09-26

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

1(与其在正文前面加上div类"primaryfade"，"primary"和"box"，我宁愿在我刚刚点击的元素前面加上没有类"fade-out"，而是用新类"primary"和"primary-fade"(同时仍然保留类"box"(。

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

j查询 - 

$(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类
  • 将文本更新为"新建">

我认为您应该将on((用于动态添加的框，例如，

$(document).on('click',".box:not(:first-child)",function() {
   ....
   ....
});

它将解决您的第二点以及第一个问题。查看更新的小提琴

您可以将动画合并 1500 秒，例如，

$(function () {
    $(document).on('click', ".box:not(:first-child)", function () {
        $(this).addClass("fade-out");
        $(".primary").removeClass("primary");
        setTimeout(function () {
            $("body").addClass("allmove");
        }, 1000);
        // merge the functions which are called after 1500ms
        setTimeout(function () {
            $("body").prepend("<div class='"primaryfade primary box'">new</div>");
            $("div[class*='fade-out']").remove();
            $("body").removeClass("allmove");
        }, 1500);
        setTimeout(function () {
            $("[class*='primaryfade']").removeClass("primaryfade")
        }, 2000);
    });
});

更新的小提琴

使用这样的东西：-

$(function() {
    function clickEvent(){  
    $(".box:not(:first-child)").off("click");
    $(".box:not(:first-child)").on("click",function() {  
        console.log('here')
      $(this).addClass("fade-out"); 
      $(".primary").removeClass("primary");
      setTimeout(function() {
        $("body").addClass("allmove");
      }, 1000);
        setTimeout(function() {
            $("body").prepend("<div class='"primaryfade primary box'">new</div>");
              clickEvent();
      }, 1500);
      setTimeout(function() {          
        $("div[class*='fade-out']").remove();
      }, 1500);
      setTimeout(function() {
          $("body").removeClass("allmove");
      }, 1500);
      setTimeout(function() {
          $("[class*='primaryfade']").removeClass("primaryfade")
      }, 2000);
  });
    }
    clickEvent()
});

这是链接 http://jsfiddle.net/q6rtgh79/5/

相关文章：