Как правильно переносить элементы?
 

Не знаю как правильно (не откушивая много ресурсов браузера) делать перенос элементов.

Есть такое:

<div class="item">
<div class="top"></div>
<div class="bottom">element 1</div>
</div>

<div class="item">
<div class="top"></div>
<div class="bottom">element 2</div>
</div>

нужно в итоге получить такое (переместить div.bottom в div.top для каждого отдельного div.item):

<div class="item">
<div class="top"><div class="bottom">element 1</div></div>
</div>

<div class="item">
<div class="top"><div class="bottom">element 2</div></div>
</div>

Есть догадка, но как мне кажется, корявая:

$('.item .bottom').each(function() {
    $(this).appendTo($(this).parent());
});

да нет, всё нормально, на первый взгляд.

только перед перестановкой всех элементов нужно всё поскрывать, чтобы браузер не рассчитывал координаты\делал перерисовку зря, а после перестановки - показать их.

а скрыть как правильно? hide() или с помощью css?

если "с помощью css" имелось в виду с помощью классов - то да, лучше так. И лучше, туда же, не каждому элементу добавлять класс "hidden" (N итераций), а их родителю дать класс "has-hidden", который скроет элементы - да, это может быть невыволнимо, но это было бы идеальным решением.