Question

我有一排五个盒子。当你点击除第一个之外的任何一个时，点击的框会淡出，它会向前滑动，然后在最左边出现一个新框作为新的第一个元素。

1）不要在主体上加上div和＃34; primaryfade，＆＃34; ＆＃34;伯，＆＃34;和＆＃34;框＆＃34;，我宁愿在我没有上课的时候点击的元素＆＃34;淡出＆＃34;但是有新课程＆＃34; primary＆＃34;和＆＃34;初级淡出＆＃34; （同时仍保留班级＆＃34;框＆＃34;）。

2）在我的小提琴中，我意识到任何曾经上过课程的盒子＆＃34; primary＆＃34;如果再次单击，则移动到非第一个位置不再触发动画。我不知道为什么会这样，但是我喜欢任何元素在点击时移回到第一个位置。

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

我认为您应该使用 on() 来动态添加框，例如

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

它将解决你的第二点以及第一个问题。请参阅 updated fiddle

您可以将动画合并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);
    });
});

Updated Fiddle

Answer 2

使用这样的东西： -

$(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/

Answer 3

我同意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类
将文字更新为“新”

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

3 个答案: