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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

1
2
3
4

<div class="message-block">
    <span class="delete"><span>
    <div>Остальной контент и блоки</div>
</div>

Вот и все. Пример вы можете посмотреть по этой ссылке.

Если вы владелец крупного проекта или собираетесь им стать, то всегда знайте, что перенос сайтов на Битрикс – это не простое дело. Лучше всего доверить это профессионалам из itcompass.ru! Они уж точно знают свое дело и разбируться очень быстро!