Question

$(document).ready(function() {
//ENTRANCE

  $("#first").css("top", -1000);
  setTimeout(function() {
    $("#first").animate({
      top: 10
    }, 400);
  }, 200);

  $("#second").css("top", -1000);
  setTimeout(function() {
    $("#second").animate({
      top: 10 + 45 + 15
    }, 400);
  }, 400);

  $("#third").css("top", -1000);
  setTimeout(function() {
    $("#third").animate({
      top: 10 + 45 + 45 + 30
    }, 400);
  }, 600);

  $("#four").css("top", -1000);
  setTimeout(function() {
    $("#four").animate({
      top: 10 + 45 + 45 + 45 + 45
    }, 400);
  }, 800);

  //EXIT
  $('#first').on('click', function() {
    $('#first').toggle();
   $('#second').animate({top: 5}, 400);
  });

  $('#second').on('click', function() {
    $('#second').toggle();
    $('#third').animate({top: 5}, 400);
  });

  $('#third').on('click', function() {
    $('#third').toggle();
    $('#four').animate({top: 5}, 400);
  });

  $('#four').on('click', function() {
    window.location.reload();
  });
});

` 我一直在尝试使用jquery让元素互相交互，这是一个 Fiddle我的代码。我虽然有一些打嗝。

在现实世界环境中，可能无法按升序或逻辑顺序调用元素。
项目在关闭时没有正确制作动画，有间隙，在某些情况下，某些项目不会移动，具体取决于点击哪些项目。
可能超过4项。

这是我的问题：无论点击哪个项目以及项目的排序顺序，我如何使元素动画和正确覆盖。

Answer 1

请参阅此fiddle

  var elements = $('.menu');// Here you can write any selector to get list of elements
  elements.on('click', function() {
    $(this).toggle();
    var nextEleemnts = $(this).nextAll('.menu'); // Same selector will follow here

    for (var i = 0; i < nextEleemnts.length; i++) {
      var topPos = $(nextEleemnts[i]).position().top - 60; //little bit of counting

      $(nextEleemnts[i]).animate({
        top: topPos
      }, 400);
    }
  });

comment中有一个人提供了一个很好的解决方案和直接的解决方案，为此你需要对CSS做一些改变，所以如果你不想这样做的话，那么你可以采取我的方法

在这里，我正在谈论另一种方法，在这里我正在做的每当你点击任何元素我发现它的下一个兄弟姐妹并将它们放置60像素

Answer 2

如果我是你，我会考虑使用jqueryUI

但也许你有某种限制。

我提出了一个解决方案，在其中我使用jquery gt selector在单击之后选择元素。

请注意，html几乎为空，可以添加任意数量的元素。

（顺便说一句，我不会让元素位置绝对，但这是另一个故事。

$(document).ready(function() {
  "use strict";

  var childCount = 12;
  // some templating library would make a better job
  for (var i = 0; i < childCount; ++i) {
    var child = $("<div>" + i + "th div </div>");
    child.css("background-color", "#" + ((1 << 24) * Math.random() | 0).toString(16));
    child.css("top", i * 50);
    $("#parent").append(child); // add any transition here
  }

  var reset = $("<div id='reset'>Reset</div>")
    .css("background-color", "black")
    .css("color", "white")
    .css("top", childCount * 50);
  $("#parent").append(reset);

  $("#parent > div").on("click", function() {
    var clicked = $(this);
    var index = $("#parent > div").index(clicked);
    $("#parent > div:gt(" + (index - 1) + ")").add(reset).animate({
      top: "-=50"
    }, 100, function() {
      clicked.remove();
    });
    childCount -= 1;
  });
});

#parent > div {
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
  position: absolute;
  text-align: center;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <!-- some data-bind attribute would be better than an id -->

</div>

如何使元素相互交互并使用jquery进行定位

2 个答案: