Перетасовка элементов списка на наведении курсора с помощью Javascript

Question

Хорошо, ребята, я пытаюсь воспроизвести этот эффект: http://lab.hakim.se/kort/ В принципе, у меня есть ul с 10 абсолютно позиционируемыми элементами списка. Поскольку последний элемент списка всегда сверху, я знаю, что нахожусь на нем и хочу переместить остальную часть lis вправо или влево, в зависимости от того, являются ли они нечетными или четными. Я пытаюсь добиться обнаружения для этого, как так:

function reshuffleCards(e) { 
    if (e.target.nodeName === 'LI') { 
    if (e.target == e.target.parentNode.children[9]) { 
     e.target.className = 'active'; 
    } else { 
     var oddItems = document.querySelectorAll('ul li:nth-child(odd)'); 
     oddItems.style.webkitTransform = 'translateY(-100px)'; 
    } 
    } 
} 

Я предполагаю, что это не самое элегантное решение проблемы, поэтому любые предложения и замечания более приветствуется.

Вот ссылка на мое перо: http://codepen.io/gbnikolov/pen/rLzwo

Answer 1

Я сделаю все переходы с CSS, что-то вроде этого:

$('#perspective').on('mousemove', function(e) { 
    var x = e.pageX, 
     w = $(this).outerWidth(), 
     lis = $(this).children('li'), 
     child = Math.floor(x/w * lis.size()/2); 

    lis.removeClass('active'); 
    $(this).children('li:nth(' + child + ')').addClass('active'); 
}) 

http://codepen.io/anon/pen/nCqFa

Или даже больше - салфетки карты с парением : http://codepen.io/anon/pen/pnlrd