How to make elements interact with each other and position with jquery

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

` I have been trying for a while to make elements interact with each other using jquery, Here is a Fiddle of my code. I have although been having a few hiccups.

In a real world environment, elements may not be called in ascending or logical order.
Items do not animate properly when closed, there are gaps and in some cases, some items do not move depending on which is clicked.
There may be more than 4 items.

Here is my question: How can i make the elements animate and cover properly regardless of which item is clicked and what order the items are sorted.

If you click on first element, do you want to move all elements one position above? — Parag Bhayani, May 10 '16 at 13:15
In the real world, the javascript code does not rely on elements ID. You can select child elements by index — Regis Portalez, May 10 '16 at 13:17
you can consider this other question: http://stackoverflow.com/questions/19553024/removing-items-from-jquery-ui-sortable (you can also add css transitions when an item is removed) — Regis Portalez, May 10 '16 at 13:20
@RegisPortalez, for my sake and others, Please provide a link to an updated fiddle if you have a solution, thanks — Quatban Taco, May 10 '16 at 13:21

Parag Bhayani · Accepted Answer · 2016-05-11T06:38:49.360

please see this 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);
    }
  });

There is also a good solution and straight forward solution provided to you by a guy in comment, For this you need to do a bit of change in CSS aswell, so if you don't want to do it, then you can take my approach aswell

Here I am talking an alternate approach, here what I am doing whenever you click on any element I am finding it's next siblings and position them up by 60 pixels

@QuatbanTaco Does it help you? – Parag Bhayani May 10 '16 at 13:48 — Parag Bhayani, May 10 '16 at 13:48
Works, thanks a lot, i hope someone finds this useful – Quatban Taco May 10 '16 at 14:33 — Quatban Taco, May 10 '16 at 14:33

Regis Portalez · Answer 2 · 2016-05-10T13:51:21.507

If I were you, I would consider using jqueryUI

But maybe you have some restrictions of some kind.

I came up with a solution, in which I use jquery gt selector to select elements after the one clicked.

Please note that html is almost empty, which allows to add as many elements as you like.

(By the way I wouldn't make elements position absolute as well, but that's another story.

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

How to make elements interact with each other and position with jquery

2 Answers2