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

Question

Я пытался решить эту проблему несколькими различными способами и до сих пор не нашел решения, которое работает так, как должно. Я хочу анимировать.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 работали правильно. Я бы опубликовал свои попытки, но пока ни одна из них не сработала. Кто-нибудь здесь знаком с любым из этих плагинов и можете ли вы помочь мне заставить их работать с кодом выше?

Answer 1

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