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

ではなく、その後、私は絶対的な位置の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 2

ちょうどあなたに大まかな論理を与えます。あなたがより多くの情報を必要とするかどうかを教えてください。 グローバルなクリックカウンターがあり、クリックごとにカウンターが増えます。例：カウンタに条件を追加します。 if（count == 1）これはアニメーションの位置を決定します。

Answer 3

私はあなたの求めるものがわかっています。私は物事をより簡単にするためにjQueryを書き直しました。私は

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> 

スタイルのように見えます。中に持参するオブジェクトを識別するために、HTML要素のクラスを使用します機能に分割同じですが、次のように新しい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/

0ここで見つけることができます

この利点は、あなたがこれらの行に新しい要素をするたびに繰り返し続ける必要がないということです：アイテムは絶対位置決め

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

Answer 4

は、この1つはあなたが説明したものをないようだ：

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

コードが理解できない場合は教えてください。