С помощью нескольких настроек разметки мы можем значительно упростить ваш код, например, давайте дадим элементам hover <div>
также общий класс, например:
<div class="boxgrid boxgrid1">
Тогда ваш код станет намного проще, вы можете заменить весь этот повторяющийся код следующим:
$('.boxgrid .cover').css({ top: '247px' });
$('.boxgrid').hover(function() {
$(".cover", this).stop().animate({ top: '0px' }, 300);
}, function() {
$(".cover", this).stop().animate({ top: '247px' }, 300);
});
$("#shop_buttons_table tr:nth-child(2)").delegate("td", "mouseenter mouseleave", function(e) {
$("#shop_buttons_table tr:nth-child(1) .boxgrid").eq($(this).index()).trigger(e);
});
Вы можете проверить это здесь , все, что мы делаем, это берём события "зависания" из нижних ячеек и передаем их на элементы .boxgrid
в строке ранее, чистый эффект ( с .stop()
вызовами, которые у вас уже были) - это единственная область для поиска для пользователя.