Продолжая кумекать, сваял функцию рокировки любых 2х элементов.
В качестве параметров получает два селектора. И меняет эти два обьекта местами.
Алгоритм прост как валенок.
1) Клонируем id2
2) вставляем клона после id1
3) заменяем оригинал id2 элементом id1.
Готово ! ))
события повешанный на элементы должны остаться привязанными как и были, тобиш непотеряются несмотря на перестановку.
<div id="intro">
<div id="one" style="background:url(images/nemo.jpg )" title="1"><h1>HELLO 1 </h1></div>
<div id="two" style="background:url(images/nemo.jpg )"title="3"><h1>HELLO 2 </h1></div>
<div id="three" style="background:url(images/walle.jpg )"title="2"><h1>HELLO 3 </h1></div>
</div>
<script src="http://yandex.st/jquery/1.6.3/jquery.min.js"></script>
<script>
function rokir(id1,id2){
id1=$(id1);
id2=$(id2);
id2.after(id1.clone(true));
id1.replaceWith(id2);
}
rokir("#three","#one"); // 1 2 3 -> 3 2 1 меняем 3 и 1
rokir("#two","#one"); // 3 2 1 -> 3 1 2 меняем 2 и 1
</script>
Единственное назначение clone здесь, это сохранить местоположение за id2 чтобы знать куда переместить id1.
Возможно реализовать её и без clone, можно запомнить позицию за счёт соседних элементов, но алгоритм будет и сложнее и почти наверняка медленнее.
upd: За счёт соседей не круто. Круто за счёт порядковой позиции в родителе узнать позицию index(селектор), получить элемент по номеру get(N). Но особого смысла всё равно не вижу.