Как правильно затушить картинку перед .fadeIn ?
 

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

если есть кверя, то её и используйте - она написана только для обеспечения кроссбраузерности.

$(...).css('opacity', 0.5);

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

P.S. Я только вначале по ошибке написал прозрачность 50%, и потом сразу исправил на 0%, но melky успел нажать цитирование с моим ошибочным вариантом, в то время как в изначально картинка должна быть невидимой!

а что мешает убрать её из видимости (visibility:hidden; или вообще display: none;) а при появлении в том же jQuery восстанавливать эту самую видимость одновременно устанавливая opacity: 0? и после этого уже плавное появление :)

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

я делаю так:

$(...).css('opacity', 0.5);
$(...).animate('opacity', 1);

более широкие настройки можно использовать
или так:

$(...).css({opacity: 0.5, display: 'none'});
$(...).css(display, 'block').animate('opacity', 1);

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

ну, я обычно сразу в стилях задаю:

display: none;
opacity: 0;

потом при появлении:

$('elem').css(display, 'block').animate('opacity', 1);

проблем никогда не возникает.
в случаях, когда несработает opacity — сработает display :)