JQuery fadeIn (), перемещающий другие элементы CSS в fadeIn () - PullRequest
Новая
       14

JQuery fadeIn (), перемещающий другие элементы CSS в fadeIn ()

2 голосов
/ 12 мая 2010

Я только что изучил некоторые jQUery для создания галереи базовых изображений на веб-сайте, который я создаю для отеля, но в настоящее время он не собирается планировать. Я понял, что стрелки будут циклически проходить по изображениям (пока нет анимации), но я решил, что стрелки должны исчезать, когда изображение наведено, и исчезать, когда нет, но это как-то портит CSS.

Стрелки начинают исчезать, вызывая: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

в начале функции jQuery ready ().

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

position:relative;
top: -90px;
left: 25px;

Должен ли относительный элемент изменять положение нормального элемента?

Если вам нужно попробовать это, просто наведите курсор мыши на большое изображение (заполнитель), и оно будет перепрыгивать, когда стрелки исчезают, и прыгать назад, когда они исчезают.

Есть идеи, почему это происходит? Я новичок JQuery.

Вот ссылка на страницу: BeanSheaf Hotel Временное пространство

Спасибо за ваше время,

InfinitiFizz

Ответы [ 4 ]

2 голосов
/ 12 мая 2010

Поскольку метод fadeOut() назначает none свойству display элемента.
попытайтесь изменить position целевого элемента на absolute, обернутый позиционированным элементом relative.

Метод .fadeOut() анимирует непрозрачность сопоставляемых элементов. Когда непрозрачность достигает 0, для свойства стиля отображения устанавливается значение none, поэтому элемент больше не влияет на макет страницы.
- Документация API

1 голос
/ 12 мая 2010

Ты все делаешь не так, чувак :) Тебе нужно сделать это:

1) position:relative для #imageContainer

2) position:absolute для arrorLeft и arrowRight родителей (так же для ссылок) и попробуйте поиграть с ними с left и top.

После того, как вы это сделаете, у вас не возникнет проблем с переходом на страницу:)

1 голос
/ 12 мая 2010

#imageContainer должно иметь: position:relative

arrowLeft должно иметь: 

position:absolute;
top:90px;
left:5px;

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

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

Абсолютно позиционированным предметам нужна точка отсчета для исходной точки (0,0). Эти элементы смотрят на свою оболочку и поднимаются по дереву HTML, пока не найдут первый относительно позиционированный элемент, чтобы определить их исходную точку. Если его нет, он использует <body> в качестве ориентира.

Поскольку мы добавляем position:relative к imageContainer, контейнер теперь становится точкой отсчета, позволяя вам точно позиционировать стрелки, используя top: и left:.

1 голос
/ 12 мая 2010

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

Я бы посоветовал получить firebug, если вы его еще не используете, что делает определение того, почему что-то происходит, намного проще.

Edit: На самом деле это больше, чем просто это. Бросьте положение относительно imageContainer и сделайте положение гиперссылки абсолютным.

...