Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2012, 19:05
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Как правильно затушить картинку перед .fadeIn ?
Есть страница, в определённом месте которой должна будет появиться картинка, которая плавно прорисуется через .fadeIn()
Как правильно подготовить картинку в HTML чтобы до .fadeIn() она небыла видна?
Поскольку .fadeIn() меняет прозрачность, я в стиль для той картинки указываю: filter:alpha(Opacity=0);opacity:0
Но правильно ли это? Ведь уже тут приходится выкручиваться для поддержки кросбраузерности. Может есть более правильный подход?
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2012, 19:08
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от zebra741258963 Посмотреть сообщение
Есть страница, в определённом месте которой должна будет появиться картинка, которая плавно прорисуется через .fadeIn()
Как правильно подготовить картинку в HTML чтобы до .fadeIn() она небыла видна?
Поскольку .fadeIn() меняет прозрачность, я в стиль для той картинки указываю: filter:alpha(Opacity=50);opacity:0.50
Но правильно ли это? Ведь уже тут приходится выкручиваться для поддержки кросбраузерности. Может есть более правильный подход?
если есть кверя, то её и используйте - она написана только для обеспечения кроссбраузерности.

$(...).css('opacity', 0.5);
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2012, 19:19
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

jQuery будет работать только после $(document).ready
а это 1-2 секунды пока подгрузятся все картинки на странице
Да и теоретически может оказаться что у пользователя отключено исполнение скриптов (я конечно не верю тому что такое бывает, но вся литература учит именно этому), а в этом случае картинка будет видна сразу (чего мне не надо).

P.S. Я только вначале по ошибке написал прозрачность 50%, и потом сразу исправил на 0%, но melky успел нажать цитирование с моим ошибочным вариантом, в то время как в изначально картинка должна быть невидимой!
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2012, 19:24
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

а что мешает убрать её из видимости (visibility:hidden; или вообще display: none а при появлении в том же jQuery восстанавливать эту самую видимость одновременно устанавливая opacity: 0? и после этого уже плавное появление
__________________
С моих слов записано верно.
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2012, 01:35
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Вот в этом и вопрос - как правильно?
Сделать просто одной строкой: filter:alpha(Opacity=0);opacity:0
Или вначале делать visibility:hidden
потом visibility:hidden
и одновременно opacity:0
Наверно выработались уже за годы какие-то стандарты...
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2012, 09:27
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

я делаю так:
$(...).css('opacity', 0.5);
$(...).animate('opacity', 1);
более широкие настройки можно использовать
или так:
$(...).css({opacity: 0.5, display: 'none'});
$(...).css(display, 'block').animate('opacity', 1);


расстановка правил может быть беспорядочна, так как все правила к элементу действуют одновременно. Порядок расстановки влияет лишь на селекторы CSS...
__________________
Нет предела совершенству...

Последний раз редактировалось sysya, 05.04.2012 в 17:13.
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2012, 12:31
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

Сообщение от zebra741258963 Посмотреть сообщение
Вот в этом и вопрос - как правильно?
Сделать просто одной строкой: filter:alpha(Opacity=0);opacity:0
Или вначале делать visibility:hidden
потом visibility:hidden
и одновременно opacity:0
Наверно выработались уже за годы какие-то стандарты...
ну, я обычно сразу в стилях задаю:
display: none;
opacity: 0;


потом при появлении:
$('elem').css(display, 'block').animate('opacity', 1);


проблем никогда не возникает.
в случаях, когда несработает opacity — сработает display
__________________
С моих слов записано верно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46
Как правильно задать условие:? dididima Общие вопросы Javascript 1 03.08.2011 01:11
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19