Как сохранить ImageSwap гладкой JQuery

Question

Как сохранить ImageSwap гладкой JQuery

0

Я нашел этот скрипт для изменения изображений при наведении.

$(document).ready(function() {
$('.rollover').hover(function() {
    swapImage(this);
}, function() {
    swapImage(this); 
    });
 });

function swapImage(image) {
    var current = $(image).attr('src');
    $(image).attr('src', $(image).attr('hover'));
    $(image).attr('hover', current);

 }

Но теперь у меня проблема, что я хочу гладкий/мягкий транзит, а не то, что он делает сейчас. Здесь вы можете найти скрипку: JSfiddle

Спасибо и приятно в воскресенье!

preissy 10 нояб. 2013, в 15:55

Источник

Теги:

jquery

swap

smooth

1 ответ

Ещё вопросы

ajp15243 · Answer 1 · 2013-11-10T13-54-00.000Z

Он меняет для меня очень гладко. Ваш метод подкачки, вероятно, будет сильно зависеть от браузера, ОС и аппаратных характеристик пользовательского компьютера, так как вы много работаете с изменением изображения src через JS.

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

Более простой способ состоял бы в том, чтобы оба изображения уже загружались на страницу (так что есть два <img>) и спрятали их. Затем при опрокидывании поменяйте, какой из них скрыт и который отображается, и поменяйте обратно, когда не зависает. Этот эффект свопинга может быть достигнут исключительно в CSS, который будет быстрее, чем JS. Он также предварительно загрузит скрытые изображения перед взаимодействием с пользователем, так как второе изображение уже находится на странице, так что вы можете сразу начать с более плавного перехода к скрытому изображению.

Я изменил вашу скрипку с помощью приведенного ниже кода. Я добавил класс в <a> и добавил второй <img> вместо того, чтобы использовать hover attr. Несколько HTML-заметок: hover - недопустимый атрибут на <img> (или любой другой элемент, если на то пошло). Вы должны использовать data-hover вместо этого, если что-нибудь, что следует стандартным спецификациям спецификаций HTML5 data-*, но нам это не понадобится для этого решения CSS. Кроме того, в вашей скрипке отсутствует </div>.

HTML:

<div class="col-1">
    <a class="rollover-container" rel="img_gal" href="gal/m.jpg">
        <img class="rollover"  src="http://schanzenstrasse.de/gal/c1_sw.jpg"/>
        <img class="rollover-swap" src="http://schanzenstrasse.de/gal/c1.jpg"/>
    </a>
</div>

CSS:

.rollover-swap {
    display: none; /*Hide the rollover image*/
}

.rollover-container:hover .rollover {
    display: none; /*If we hover over the <a>, then hide the normal image*/
}

.rollover-container:hover .rollover-swap {
    display: inline; /*If we hover over the <a>, then show the rollover image*/
}

JS:

Никто!