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

Question

Это не конкретная проблема или ошибка, а скорее вопрос реализации.

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

Это в основном то, что я хотел бы: изображение, переходящее в другое изображение при наведении курсора с использованием javascript и предпочтительно jQuery.Я бы создал два изображения - одно с именем image.jpg, а другое с именем image_o.jpg.Они будут находиться в одной и той же папке.

Вот как будет выглядеть html-разметка:

<img class="imghover" src="image.jpg" />

В javascript мне потребуется иметь класс imghover на всех изображениях, которые яхочу паритьСценарий обнаружит второе изображение с именем imghover_o.jpg и будет использовать его для второго изображения при переходе при наведении.

Для перехода не потребуется CSS или background-image.

У меня будет несколько таких изображений в сетке, и все они должны будут иметь плавный переход. Итак, вы можете видеть, что я не хочу создавать новый класс CSS для каждого изображения или иметь дополнительный скрипт и разметку html, которые станут громоздкими.

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

Так что вы могли бы сказать, что я просто хочу добавить переход с постепенным исчезновением в скрипт ролловера Даниэля Нолана.Можно ли переделать его скрипт с помощью jQuery?

Возможно ли это (с помощью jQuery)?

Сайт, на котором я буду его использовать

Answer 1

Вы можете получить атрибут src изображения и использовать .replace() для замены URL при наведении курсора!

РАБОЧИЙ ДЕМО

$('.fadein').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg"); 
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

Или как:

ЭТО

$('.fadein').each(function() {  
    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg");
    $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

Что делает скрипт:

• var std = $(this).attr("src"); получить атрибут SRC
• заменить imageRed.jpg на imageRed_o.jpg: var hover = std.replace(".jpg", "_o.jpg");
• Чем нам пришлось обернуть первое изображение в элемент $(this).wrap('<div />')
• так что теперь мы можем клонировать это изображение и дать ему другое src и поместить его под первым .clone().insertAfter(this).attr('src', hover)
• и мы должны удалить из второго изображения класс .fadein (этот класс будет иметь только первое изображение!) .removeClass('fadein')
• после того, как мы клонировали это изображение, мы устанавливаем изображение на одну КАЖДУЮ секунду, присваивая ему абсолютную позицию CSS:
• Чем при входе / выходе мыши мы можем просто поиграть с видимостью первого изображения.

Answer 2

Вот хороший шаблон:

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

JS:

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});

Answer 3

попробуйте сделать это так просто:

 $('#img').hover(
     function() {
       $(this).stop().fadeIn(...).attr('src', 'image_o').fadeOut(...)
     }, 
     function() {
       $(this).stop().fadeIn(...).attr('src', 'image').fadeOut(...)
 });