JQuery Fadein / Fadeout при наведении вызывает отскок окна - PullRequest
Новая
       5

JQuery Fadein / Fadeout при наведении вызывает отскок окна

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

Только что начал использовать fadein / fadeout - он работает, но с проблемами.У меня есть набор ссылок, содержащих div (например, '#linki').Идентификатор каждого div 'link' нацелен на то, чтобы при наведении / включении на тексте ссылки изображения / текст во втором наборе сложенных div (т. Е. «#Webshoti») подвергались реакции fadein + fadeout.Таким образом, в основном код моей страницы содержит набор из 10 элементов div #link (внутри div 'linkWrapper'), 10 элементов div #webshot (все занимающие одинаковую позицию внутри элемента div 'webshots) и 10 экземпляров сценария jQuery:

Например, html для #link div: 

<div class="linkList1"><a href="http://www.fmc.gov.au/">Federal Magistrates Court</a></div>

Например, #webshot div: 

#webshot1{
position:absolute;
right:30px;
width:500px;
height:322px;
display:none;

Например, сценарий jQuery: 

$(function(){
$('.linkList1').mouseenter(
function(){
$('#webshotText').fadeOut(200, function(){
$('#webshot1').fadeIn(450);
});
}
);
$('.linkList1').mouseleave(
function(){
$('#webshot1').fadeOut(20);
}
);
});

(обратите внимание, что#webshotText отображается при загрузке страницы до тех пор, пока не будет отображена какая-либо из # ссылок div)

Эту веб-страницу можно просмотреть ЗДЕСЬ

Проблема: (1.)при наведении указателя мыши на список div 'link' окно прыгает (эй, смотри - это JQuery Bounce! Doh).(2.) в некоторых случаях изображение в #webshot, на которое нацелена текущая #linkst, по-видимому, загружается, пока ранее нацеленное изображение #webshot все еще выгружается, в результате чего входящее изображение (на мгновение) накладывается на нижний край исходящего изображения.

Я попытался установить на короткое время mouseout> fadeout (было 200 мс), но без изменений.Я применил в коде предварительный загрузчик изображений jQuery, но без изменений.Бывает в windows / FF4 и IE8

Есть предложения?Спасибо, Кирк (** бонусные баллы, если есть какой-либо способ, которым я мог бы использовать скрипты массива, чтобы избежать необходимости в 10 экземплярах скрипта jQuery!)

1 Ответ

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

Эта скрипка (создана для ответа на этот вопрос ) может помочь:

Идея состоит в том, чтобы:

  1. Нарисуйте все, что вам нужно, с помощью обычного HTML
  2. Абсолютная позиция каждого изображения, которое вы хотите постепенно увеличивать / уменьшать
  3. Применять эффекты затухания, не беспокоясь о эффекте суммирования (теперь они в абсолютном положении!).

Надеюсь, это поможет.

...