Как правильно обратиться к одинаковым элементам черезjQuery?

Question

[Katsuro]

На этом сайте personal-rezerv.ru/#1531434082452-0ca8466c-1aec в блоке Персонал и цены есть 3 блока они крутятся , но когда на одну из них они все останавливаются , а нужно сделать , что бы при наведения на первый блок останавливался только он , а другие дальше крутились

function showFront() { 
jQuery('.vc-hoverbox-front').css('transform', 'rotateY(180deg)'); 
jQuery('.vc-hoverbox-back').css('transform', 'rotateY(0deg)'); 
setTimeout(showBack, 1000); 
} 
function showBack() { 
jQuery('.vc-hoverbox-front').css('transform', 'rotateY(0deg)'); 
jQuery('.vc-hoverbox-back').css('transform', 'rotateY(-180deg)'); 
} 
var timer_c = setInterval(showFront, 3000);
jQuery('.vc-hoverbox').hover(function(){ 
clearInterval(timer_c); 
jQuery('.vc-hoverbox-front').css('transform', 'rotateY(180deg)'); 
jQuery('.vc-hoverbox-back').css('transform', 'rotateY(0deg)'); 
}); 
jQuery('.vc-hoverbox').mouseleave(function(){ 
timer_c = setInterval(showFront, 3000); 
});

это скрипт

Comments

[ProjectSoft]

Ни какой магии. На чистом CSS можно сделать не прибегая к JS вообще.
Примеров в сети полно.

[Сергей delphinpro]

Этот скрипт нужно выкинуть и запилить анимацию на keyframes

Answer 1

[BATPYIIIKOB]

Вам нужно обозначить каждый блок. Допустим через атрибут data-***, например: data-block-1, data-block-2 и т.д. Далее в функции hover отлавливайте элемент с этим атрибутом и делайте необходимые действия с ним.

Comments

[Katsuro]

хорошо

[Сергей delphinpro]

Katsuro, плохо — лишние атрибуты.
Получаете выборку, проходите по ней ичем и вуаля, все работает как надо

$('.block').each(function(index, elem){
  $(elem).find('.vc-hoverbox')
  ....
});

ЗЫ
Правильный вариант — в комментариях.