Плавное удаление блока на jquery

Плавное удаление блока на jquery

Недавно в одном проекте меня попросили сделать плавное удаление блоков, которые не есть фиксированными по высоте. Но при этом нужно было сделать все плавно и без всяких дерганий в момент осуществления удаления. Думал не очень долго над тем как написать, но долго думал над тем, как сделать скрипт универсальным, чтобы он подходил любой структуры и для любого сайта. Итак, вот что у меня получилось:

$('.delete').on('click', function(){ var deleted_block = $(this).parent(), bl_h = deleted_block. outerHeight(), bk_index = deleted_block. index(), next_bl = deleted_block. siblings(':eq('+bk_index+')'), marg = parseInt(deleted_block. css('margin-bottom')); deleted_block. fadeOut(500); setTimeout(function(){

$(next_bl).css('margin-top', bl_h+marg);

$(next_bl).animate({ marginTop: 0

},400);

}, 505); setTimeout(function(){ deleted_block. remove();

}, 700); return false;

});

Для того, чтобы этот скрипт работал правильно, Вам просто нужно положить Ваш крестик или любой другой элемент(блок), во внутрь того блока, который нужно будет удалить при клике, так, чтобы он был его прямым потомком. То есть чтобы это выглядело примерно так

<div class="message-block">

<span class="delete"><span>

<div>Остальной контент и блоки</div>

</div>

Вот и все.


Карта сайта


Информационный сайт Webavtocat.ru