Jquery оживить проблему в Google Chrome

Question

Я пытался воссоздать эффект, который я видел на другом веб-сайте, и, хотя похоже, что он в основном работает, у меня нет проблем в Google Chrome.Эффект заключается в том, что при наведении курсора на миниатюру изображения появляется 3 значка, которые ссылаются на различные параметры.

Проблема возникает в Chrome, когда в одном окне больше эскизов, чем видно в одном окне.Вы без проблем зависаете над окнами.Хотя, если вы прокрутите вниз до тех, которые изначально не были видны в окне, возможно, есть какая-то ошибка, которая блокирует анимацию.Он работает хорошо, если вы двигаетесь медленно, но более быстрые движения, кажется, приостанавливают анимацию на одной миниатюре (вам не нужно перемещаться так быстро, чтобы воспроизвести ее, я пробовал ее на трех разных машинах).Если вы вернетесь назад к тем, которые были видны, все равно будет работать нормально.Если я разверну окно до максимума, чтобы все они были видны, то снова все в порядке.

Отлично работает в IE9 и FF4 на всех миниатюрах независимо от размера окна.Я возился с .stop, изменяя истинные, ложные параметры, но это, кажется, не имеет большого эффекта.Это мои первые попытки использовать jquery, кроме использования предварительно написанных сценариев, любая помощь приветствуется.В результате поиска я видел, что у других были проблемы с Chrome, хотя ничего конкретного, что могло бы помочь.

http://kineticcomplex.com/jquerytest.html

Answer 1

Это работает в Chrome12 для меня. В прошлом у меня было несколько проблем с hover() в Chrome (и position() также). Я читал, что Webkit иногда слишком быстр. Может быть, это то, что здесь происходит? Я действительно не мог понять, в чем проблема с hover () в этом случае. Однако в Chrome лучше использовать другую стратегию. Я изменил класс на действительный <img>, а не на внешний <div>, иначе анимация начиналась в пустом пространстве вокруг изображений, и я переместил фон тень перед анимацией, чтобы ускорить выделение, т. е. не нужно ждать начала анимации.

Редактировать: Это может быть ошибка float в Chrome. Если вы замените стиль float:left в .et_pt_gallery_entry на display:inline-block, тогда hover () будет работать. Я все равно оставил обновленный код hover () ниже, так как он немного чище. Я стараюсь избегать поплавков, когда это возможно. За эти годы было много проблем с плавающими элементами! Надеюсь, это поможет вам.

$(function(){
    $('.et_pt_item_image').hover(function(){
        $('.zoom-icon, .more-icon, .map-icon', this).css({opacity:0, visibility:'visible'});
        $('img', this).css({backgroundColor:'#ddd', borderColor:'#bbb'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 1, left: 40}, 400);
        $('a.more-icon', this).stop().animate({opacity: 1, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 1, left: 170}, 400);
    }, function(){
        $('img', this).css({backgroundColor:'#fff', borderColor:'#e5e5e5'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 0, left: 31}, 400);
        $('a.more-icon', this).stop().animate({opacity: 0, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 0, left: 180}, 400);
    });
});

Answer 2

Пытались ли вы использовать различные события мыши, такие как указатель мыши / выход или указатель мыши / выход?