JQuery fadeIn() перемещение других элементов CSS на fadeIn()

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

Стрелки начинают затухать по телефону: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

на старте JQuery готов (функции).

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

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

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

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

Любые идеи, почему это происходит? Я jQuery noob.

Вот ссылка на страницу: BeanSheaf Hotel Temporary Space

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

InfinitiFizz

источник

2010-05-11 Infiniti Fizz

Вы можете проверить [JQuery Cycle Plugin] (http://jquery.malsup.com/cycle /). –

Спасибо всем за ваши комментарии и спасибо за то, что я показал мне, как много мне нужно учиться :) Теперь он работает с предложениями, в основном каждый сказал, о том, чтобы сделать контейнер относительным и стрелки абсолютными. Теперь мне просто нужно решить, как переносить события после использования replaceWith() yay. Спасибо всем. –

Еще один вопрос, извините, теперь я обновил страницу (изменив CSS в файле fund.css и некотором jQuery в gallery.js, чтобы события были делегированы при изменении изображения внутри галереи). Парящий работает отлично с точки зрения элементов, которые не прыгают, но теперь моя проблема заключается в том, что стрелки будут исчезать на hoverOut выше и ниже #imageContainer, но не слева или справа от него. Кроме того, затухание в и из стрелки. Кажется, что это путаница с его обработкой Internet Explorer, но стрелкаLeft выглядит прекрасно, любые идеи? Извините, если бы я спросил об этом в новом вопросе. Спасибо –

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

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

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

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

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

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

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

источник

2010-05-11 21:27:43

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

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

Редактировать: На самом деле это больше, чем просто. Отметьте положение позиции на объекте imageContainer и сделайте положение гиперссылки абсолютным.

источник

2010-05-11 21:26:39 Bela

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

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

источник

2010-05-11 21:29:26 sepehr

Вы делаете все неправильно чувак :) Вам нужно сделать, это:

1) position:relative для #imageContainer

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

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

источник

2010-05-11 21:31:28

JQuery fadeIn() перемещение других элементов CSS на fadeIn()

ответ

Смежные вопросы