如何使用jQuery对元素和位置进行排序

Question

无论首先单击哪个项目，还是单击按钮的顺序如何，如何使元素从上到下进行动画处理？

例如，类似（下）的输出，但仍保持片段的入口动画和关闭功能。

1. Fourth
2. Second
3. First
4. Third

jQuery（ FIDDLE ）：

$(document).ready(function() {
  //ENTRANCE
  $("#first").css("top", -1000);
  $("#1st").on('click', function() {
  setTimeout(function() {
    $("#first").animate({
      top: 10
    }, 400);
  }, 200);
    });

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

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

  $("#four").css("top", -1000);
  $("#4th").on('click', function() {
  setTimeout(function() {
    $("#four").animate({
      top: 10 + 45 + 45 + 45 + 45
    }, 400);
  }, 800);
});
  //EXIT
  var elements = $('.menu');
  elements.on('click', function() {
    $(this).toggle();
    var nextEleemnts = $(this).nextAll('.menu');
    for (var i = 0; i < nextEleemnts.length; i++) {
      var topPos = $(nextEleemnts[i]).position().top - 60;
      $(nextEleemnts[i]).animate({
        top: topPos
      }, 400);
    }
  });
  $('#four').on('click', function() {
    window.location.reload();
  });

});

Answer 1

只是给你一个粗略的逻辑。 让我知道您是否需要更多信息。 有一个全局点击计数器，并在每次点击时增加它。 在计数器上添加一个条件，例如if（count == 1），它将确定动画的位置。

Answer 2

我很确定我知道您的要求。 我重写了jQuery，使事情变得更容易。 我将其拆分为一些函数，这些函数将使用HTML元素的类来标识要引入的对象。

HTML现在看起来像这样

<div id="first" class='menu item-1'>
    First Div
</div>

<div id="second" class='menu item-2'>
    Second Div
</div>

<div id="third" class='menu item-3'>
    Third Div
</div>

<div id="four" class='menu item-4'>
    Reset
</div>

<button data-div="1" id="1">Open 1st</button>
<button data-div="2" id="2">Open 2nd</button>
<button data-div="3" id="3">Open 3rd</button>
<button data-div="4" id="4">Open 4th</button>

样式相同，但是新的jQuery如下

// Element count
count = 0;

// Init
function init(){
    $(".menu").css("top", -1000);
}

// Bring element onto page
function bring_in_element(el){
    $(".item-" + el).css('z-index', count)
    $(".item-" + el).data('order',count)
    o = $(".item-" + el).data('order');
    $(".item-" + el).animate({ 'top': 10 + (70 * parseInt(o)) }, 400);
    count++;
}

// Remove element from page
function take_out_element(el,b){
    count--;
    el.css("top", -1000);
    $('button#' + b).removeClass('active');
    var elements = $('.menu');
    for (var i = 0; i < elements.length; i++) {
        if ($(elements[i]).data('order') > el.data('order')) {
            $(elements[i]).animate({ top: '-=70px' }, 400);
            $(elements[i]).data('order',parseInt($(elements[i]).data('order') - 1))
        }
    }
}

$('button').click(function(){
    if(!$(this).hasClass('active')){
        bring_in_element($(this).data('div'))
        $(this).addClass('active')
    }
})

$('.menu').click(function(){
    take_out_element($(this),$(this).attr('class').split('').pop())
})

init(); // Init

可以在此处找到实时工作示例

http://codepen.io/jcoulterdesign/pen/43f9d33820a917df58a54ad16d05bbf9/

这样做的好处是您不必每次想要一个新元素时都重复这些行：

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

Answer 3

而不是绝对定位项目，我将它们添加到绝对定位的div中，并使它们在那儿保持流动。 这样，它们将自动保持添加顺序。 您只需要在加载时将它们保留在某个隐藏库中，然后单击即可将它们移动到目标区域。

代替尝试解释（用我的英语浇灌），我让代码说明自己： https ： //jsfiddle.net/kfnyn908/10/

HTML：

<div id="library">
  <div id="first" class='menu'>
    First Div
  </div>

  <div id="second" class='menu'>
    Second Div
  </div>

  <div id="third" class='menu'>
    Third Div
  </div>

  <div id="four" class='menu'>
    Reset
  </div>
</div>


<div id="target-area">

</div>

<div id="buttons">
  <button id="1st" data-target="first">Open 1st</button>
  <button id="2nd" data-target="second">Open 2nd</button>
  <button id="3rd" data-target="third">Open 3rd</button>
  <button id="4th" data-target="four">Open 4th</button>
</div>

javascript：

var $library = $('#library');
var $target = $('#target-area');
var $buttons = $('#buttons button');

$buttons.on('click', function() {
  var $button = $(this);
  var id = $button.data('target');

  $itemToAdd = $library.find('#' + id);
  if ($itemToAdd.length == 0) {
    return;
  }

  var top = -($target.height() + $target.offset().top);
  $itemToAdd
    .appendTo($target)
    .css({
      top: top - $itemToAdd.height()
    })
    .animate({
      top: 0
    });
});

$target.on('click', '.menu', function() {
  var $itemToRemove = $(this);

  if ($itemToRemove.attr('id') == 'four') {
    window.location.reload();
    return;
  }

  $itemToRemove.animate({
    top: -($itemToRemove.offset().top + $itemToRemove.height())
  }, function() {
    $itemToRemove.appendTo($library);
  });
})

请注意，此方法不对目标区域或项目的位置或尺寸做任何假设。 可以根据需要在CSS中更改其属性，并且一切都会正常进行。 动画的最高位置是在需要时计算的（而不是仅使用-1000并假定是安全的），因此动画也应“更干净”。 另外，您可以根据需要添加任意多个项目，而无需更改javascript。

Answer 4

似乎这是您所描述的：

https://jsfiddle.net/1fh19usz/15/

$(document).ready(function() {
    // This map may be easily eliminated by using HTML custom attributes like data-menu="1st" on div#first etc..
    var btns2items_map = {
        '1st': '#first',
        '2nd': '#second',
        '3rd': '#third',
        '4th': '#fourth'
    };
    //ENTRANCE
    var menuAnimate = initMenuAnimate();
    $('div.menu').css('top', -1000);
    $('button').click(function () {
        var self = $(this);
        var menu_id = btns2items_map[self.attr('id')];
        if (menu_id !== undefined) {
            menuAnimate(menu_id);      
        }
    });
    //EXIT
    var elements = $('.menu');
    elements.click(function() {
        var self = $(this);
        self.toggle();
        for (var i = 0; i < elements.length; ++i) {
            if ($(elements[i]).attr('data-order') > self.attr('data-order')) {
                var top_pos = $(elements[i]).position().top - 60;
                $(elements[i]).animate({ top: top_pos }, 400);
            }
        }
    });
    $('#fourth').on('click', function() {
        window.location.reload();
    });
});

function initMenuAnimate() {
    var count = 0;
    return function (menu_item_id) {
        ++count;
        var menu_item = $(menu_item_id);
        menu_item.attr('data-order', count);
        setTimeout(function() {
            menu_item.animate({ top: count * 60 + 10 }, 400);
        }, count * 200);
    }
}

请告知代码是否无法理解。