jQuery hover, как один раз активировать анимацию затухания, при этом hover активируется через 2 наложенных изображения

поэтому я пытаюсь использовать плагин jQuery hoverIntent, чтобы исправить проблему, с которой я сталкиваюсь, с наложенными изображениями, используя ту же анимацию при наведении курсора fadeToggle.

В настоящее время у меня есть изображение iPhone и пузырь чата над ним. Теперь и iPhone, и значок чата переходят в магазин приложений iTunes. Также, когда вы наводите курсор на телефон и пузырь, пузырь оживает.

Моя проблема возникает, когда вы наводите курсор на область, где пузырь и телефон накладываются друг на друга, а также если вы наводите курсор на пузырь и продолжаете перемещать мышь в область телефона. В основном анимация пузыря происходит дважды, это не намерение. Цель состоит в том, чтобы анимация всплывающего окна чата происходила только один раз.

Тестовая ссылка: http://leongaban.com/_projects/whoat/_HTML/fade.html

введите здесь описание изображения

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

hoverIntent.js: http://cherne.net/brian/resources/jquery.hoverIntent.html

Мой текущий jQuery

    // My Original Try Me chat bubble animation
    $('.home-content #whoatnet-to-itunes').click(function() {
        window.location = home.itunesLink + this.id;
    }).hover(function(){
        $('.home-content .tryme').find("img:last").fadeToggle();
    });

    // My hoverIntent Test - seems to have made it worst :(
    // See test link above
    $('.home-content #whoatnet-to-itunes').click(function() {
        window.location = home.itunesLink + this.id;
    }).hoverIntent(toggleFade);

    function toggleFade(){$(this).find("img:last").fadeToggle().stop}

Обновить рабочий код

    $('.home-content .iphone').click(function() {
        window.location = home.itunesLink + this.id;
    }).hoverIntent(phoneToggleFade);

    $('.home-content .tryme').click(function() {
        window.location = home.itunesLink + this.id;
    }).hoverIntent(tryToggleFade);

    function phoneToggleFade(){$('.home-content .tryme').find("img:last").fadeToggle().stop}
    function tryToggleFade(){$(this).find("img:last").fadeToggle().stop}

jquery jquery-hover hoverintent
person Leon Gaban    schedule 05.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ошибка связана с тем, что вы используете идентификатор #whoatnet-to-itunes для двух элементов:

<div class="tryme" id="whoatnet-to-itunes">...</div>
<div class="iphone" id="whoatnet-to-itunes"></div>

Это недопустимо и означает, что вы прикрепляете событие щелчка и наведения как к iPhone, так и к пузырю. Удалите идентификаторы из них обоих, измените селектор с:

$('.home-content #whoatnet-to-itunes') to $('.home-content .iphone').

Тогда код hoverIntent будет выглядеть так:

$('.home-content .iphone').click(function() {
    window.location = home.itunesLink + this.id;
}).hoverIntent(toggleFade);
person Joe    schedule 05.06.2013
comment
А, спасибо! У меня был тот же идентификатор, потому что ссылка на itunes была добавлена ​​?=из идентификатора. Теперь к вопросу будет добавлен обновленный рабочий код. - person Leon Gaban; 05.06.2013