Добавление плавного перехода в javascript прокрутки img Дэниела Нолана

Хорошо, я понял, что есть масса вещей о исчезновении изображений с помощью javascript, но ни один из них не делает то, что мне хотелось бы.

ДЕЛАЕТ Дэниел Нолан.

Его скрипт позволяет мне просто добавить class=imgover к изображению, и в результате получается хорошая замена изображения. Все, что мне нужно сделать, это сделать второе изображение и добавить _o в конце имени файла. Это лучший и самый простой способ, который я видел. Мне не нужны причудливые переходы jQuery, и я не хочу добавлять дополнительную разметку в свой css, добавляя background изображений. Все, что я хочу, это хороший плавный переход между изображениями. Поверьте мне, я просмотрел несколько туториалов jQuery по обмену изображениями.

Все уроки jQuery, которые я видел, требуют дополнительной разметки для каждого изображения. У меня есть несколько изображений на моей странице, которые нуждаются в обмене изображениями. Большинство онлайн-тренеров предполагают, что вам нужно только одно изображение на странице, для которой нужен эффект.

Как я могу добавить переход затухания в javascript прокрутки изображений Дэниела Нолана? Я хотел бы сделать это, если это возможно, но я не могу заставить его работать.

http://www.dnolan.com/code/js/rollover/

Необработанный код


javascript rollover fade
person davecave    schedule 30.08.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы могли бы сделать что-то подобное с чистым CSS3, без Javascript...

HTML:

<div id="container">
    <div id="roll"></div>
    <div id="under"></div>
</div>

CSS:

#container {
    position:relative;
    width:50px; height:20px;
}
#roll {
    background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
    cursor:pointer;
    opacity:1;
    width:50px; height:20px;
    position:absolute; z-index:2;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#roll:hover {
    opacity:0;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#under {
    background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
    width:50px; height:20px;
    position:absolute; z-index:1;
}

Демо

person mVChr    schedule 30.08.2011
comment
Спасибо, есть ли какой-либо недостаток в том, что это касается времени загрузки изображений (или когда они загружаются)? - person davecave; 31.08.2011
comment
Хорошо, я пока отказался от переходов CSS3. Как я могу просто добавить затухание в сценарий Нолана? Мне очень нравится его сценарий, поэтому я хотел бы сохранить его. - person davecave; 04.09.2011

arrow_upward
0
arrow_downward

Это лучший способ:

Лучшая реализация обмена исчезающими изображениями с помощью javascript/jQuery

Он имеет ту же предпосылку, что и сценарий Дэниела Нолана, но в нем есть затухание, и это jQuery.

person davecave    schedule 29.02.2012