Вот страница с несколькими миниатюрами:
http://thenozzle.net/games
То, что я хочу, это когда вы наводите курсор на один эскиз, другие становятся черными (за большим пальцем есть черная область). Отключись, и они вернутся.
Проблема заключается в том, что при переходе от одного эскиза к другому все остальные эскизы на странице постепенно исчезают, а затем исчезают очень быстро. Как я могу предотвратить это? Есть ли лучший способ сделать то, что я пытаюсь сделать?
Вот что у меня есть:
$('.child-thumb').hover(
function () {
$(this).addClass('active').removeClass('inactive');
$('.inactive').children('img').stop(1,1).fadeTo('fast', .3);
$('.inactive').children('p').stop(1,1).fadeTo('fast', .3);
},
function () {
$('.inactive').children('img').stop(1,1).fadeTo('fast', 1);
$('.inactive').children('p').stop(1,1).fadeTo('fast', 1);
$(this).removeClass('active').addClass('inactive');
}
);
ПРИМЕЧАНИЕ 2. Кроме того, если есть какой-либо способ, которым я могу упростить или сжать свой код, чтобы сделать его более семантическим / быстрым / легким, пожалуйста, дайте мне знать.
Спасибо!