При наведении мыши. Animate останавливается перед .animate - PullRequest
Новая
       6

При наведении мыши. Animate останавливается перед .animate

1 голос
/ 07 апреля 2011

У меня есть две разные функции .animate.

  1. Сдвигает элементы готового документа.
  2. Добавляет эффект наведения мыши к этим же элементам.

Проблема здесь в том, что если у вас есть мышь над областью, в которой элементы скользят по документу, они остановятся в том положении, в котором находилась ваша мышь.

Цель, конечно, состоит в том, чтобыэлементы скользят сами по себе без каких-либо перерывов.

http://photoshopmesta.net/sic/theTest/slide.html

Другое дело ... при отпускании мышью элемент перемещается немного выше, чем до наведения мыши ...

Есть идеи по загрузке изображения?Я положил код, который загружает файл изображения на документ готов.Он загружает изображения так быстро, как может, но я не думал о том, что элементы будут по-прежнему скользить, независимо от того, загружено изображение или нет ... и, конечно, они не загружаются до скользящего действия ..: /

Редактировать:

Рабочий пример благодаря @entropo http://jsfiddle.net/PnHpk/7/ Хотя может случиться так, что изображения исчезнут оттуда через некоторое время, поэтому пример с цветным фоном вместоизображения http://jsfiddle.net/PnHpk/8/

Ответы [ 2 ]

1 голос
/ 08 апреля 2011

Я поместил ваш пример в jsfiddle: http://jsfiddle.net/entropo/PnHpk/

Это хорошая практика, когда задаешь вопросы здесь, потому что это помогает людям ответить вам рабочим примером.

Вот мой взгляд на получениечтобы это работало: http://jsfiddle.net/entropo/PnHpk/7/

Я пользуюсь новыми отложенными объектами jQuery 1.5.
См .: SO '[jquery] deferred' search

ТакжеЭто не совсем то, что я сделал (я предпочел использовать push для создания стека Promise), но это полезно: Отложенные обещания и синхронизация jquery.animate ()

0 голосов
/ 07 апреля 2011

Причина, по которой он это делает, заключается в том, что у вас есть .stop в наведении курсора и наведении мыши.Очевидно, что имеет смысл иметь их там, поэтому вам нужно установить события mouseover и mouseout после анимации загрузки.

Также, если вы хотите подождать, пока изображение не будетзакончив загрузку, чтобы воспроизвести анимацию, затем используйте событие .load изображения, а не событие документа .ready

Правка: элементы перемещаются немного вверх после наведения мыши, поскольку они изначально начинаются с отступа в 10 пикселей, ноанимация устанавливает его на 0 пикселей при наведении мыши

Edit2:

Вместо использования предварительного загрузчика для этого изображения используйте что-то вроде этого: 

$(document).ready(function()
{
    var img = document.createElement('img');

    img.onload = function()
    {
        console.log("%o finished loading", this);
        //Set mouseover/mouseout event here
    };

    img.src = 'linkit.png';
});
...