Как отсортировать элементы и положение с помощью 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 элемента, чтобы определить, какой объект, чтобы принести в.

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

Пожалуйста скажите, если код не понятно.