Использование плагина jQuery hoverFlow или hoverIntent для анимации fadeIn / fadeOut - PullRequest
Новая
       39

Использование плагина jQuery hoverFlow или hoverIntent для анимации fadeIn / fadeOut

0 голосов
/ 23 августа 2011

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

1) при наведении мыши постепенно исчезают текст и изображение (расположенные в пределах пролета) 2) завершить анимацию fadeIn перед переходом к следующей анимации
3) при отпускании мыши постепенно исчезают текст и изображение
4) завершить анимацию fadeOut перед переходом к следующей анимации
5) анимация должна работать плавно и не должна стоять в очереди

Вот что у меня есть: 

$(document).ready(function() {

$("a").mouseover(function () { 
$("span.imtx").dequeue().fadeIn(3000, "swing", " ");
});

$("a").mouseleave(function () { 
$("span.imtx").fadeOut(3000, "swing", " ");
}); 
});

Пока приведенный выше код наиболее близок к тому, что я хочу, поэтому я придерживаюсь этого, если это вообще возможно, сохраняйте любые незначительные изменения. Тем не менее, иногда исчезают, а иногда нет. Это может также стать нервным с многочисленными указателями мыши и листьями мыши. Я использую FF 6.0 для разработки, но это также нужно для работы во всех основных браузерах (FF6, IE8, Google Chrome). Я работал с jQuery / JavaScript только месяц, поэтому, пожалуйста, примите это во внимание при ответе. Это совсем не интуитивный язык для меня, но я учусь на ходу.

Хорошо, теперь вопрос, или, скорее, просьба о помощи: Я хочу включить либо плагин hoverFlow Ральфа Штольце, либо плагин Брайана Черна hoverIntent, чтобы анимации fadeIn и fadeOut работали правильно. Я бы опубликовал свои попытки, но пока ни одна из них не сработала. Кто-нибудь здесь знаком с любым из этих плагинов и можете ли вы помочь мне заставить их работать с кодом выше?

1 Ответ

0 голосов
/ 23 августа 2011

Когда вы используете fadeIn или fadeOut, это по существу меняет свойство display, следовательно, если оно не завершено один против другого, и вы выполняете второй эффект, объект больше не будет иметь соответствующих свойств, которые необходимы jQuery для запуска эффекта, поэтому либо уменьшите время и / или добавьте stop () вместо dequeue () и, если хотите, попробуйте это http://jsfiddle.net/yAupq/, я использую fadeTo, который не сломается, даже если ваша мышь входит и уходит внезапно и многократно включается и выключается. Эффект будет продолжаться для текущего события, начиная с последнего состояния, и не будет добавлять в очередь все время, когда мышь входила или выходила из объекта и запускала эти эффекты один за другим ...

...