jquery hover замена изображения на исчезающее при наведении курсора мыши

Question

Некоторое время я искал в Интернете, пытаясь найти лучший способ написать скрипт jquery, который выполняет эту простую задачу:замена изображения при наведении курсора мыши с элегантным эффектом затухания.Я нашел много решений (в некотором роде громоздких и неуклюжих) и сузил их до того, что я считаю двумя лучшими:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Для моих целей я хочу иметь возможность выполнять эту замену при наведении курсора несколько раз на одной странице.Страница находится http://www.vitaminjdesign.com.В настоящее время у меня есть зависания в моем "сервисе навигации" (другой тип наведения), но я хочу применить их ко всем кнопкам навигации, а также к значкам социальных сетей в нижнем колонтитуле.Все наведения будут одинаковыми - два файла изображений, один из которых сменяется другим при наведении курсора и возвращается при отпуске.Каков наилучший из возможных способов решения этой проблемы?Возможно, одна из приведенных выше ссылок?

Answer 1

Вы также можете сделать это, используя одно фоновое изображение и постепенное появление и исчезновение прозрачного элемента div.Вот краткий пример, который можно расширить для автоматической работы с одним классом изображений:

$(document).ready( function() {
    $("#mask-div")
        .css({
          "position": "absolute",
          "width": 275,
          "height": 110,
          "background": "rgba(255, 255, 255, 0.5)"
        })
        .mouseover( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouseout( function() {
        $("#mask-div").fadeIn("slow");
    });
});

Запуск демо можно увидеть на jsbin: демо-один

ОБНОВЛЯТЬ:Вот более общее решение (неполное, но показывает некоторые идеи): демо-два .Просто добавьте класс «fade-img» к любому изображению, на котором вы хотите получить этот эффект.

$(document).ready( function() { 
    $(".fade-img") 
        .before("<div class='fade-div'></div>") 
        .each( function() { 
            var img = $(this); 
            var prev = img.prev(); 
            var pos = img.offset(); 

            prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                .mouseover( function() { 
                    $(this).fadeOut("slow"); 
                } 
            ); 
        }) 
        .mouseout( function() { 
            $(this).prev().fadeIn("slow"); 
        }) 
    ; 
});

Answer 2

Я выбираю решение по второй ссылке, которую вы предоставили.Это коротко, ясно и просто.

• Создайте два <img> теги
• Расположите один точно над другим (CSS с z-index)
• При наведении курсора мыши уменьшите непрозрачность изображения, увеличив его. z-index к 0
• Это сделает его прозрачным, и вы увидите основное изображение.
• Когда наведение заканчивается, непрозрачность исчезает до 1 снова.

Сделанный

Answer 3

внутри $(document).ready()

$('.imgbuttonclass').hover(function(){
    $(this).animate({
        backgroundImage: 'img2.png'
    },500);
},function(){
    $(this).stop(true).animate({
        backgroundImage: 'img1.png'
    },500);
});

Редактировать

если вы только хотите сделать это: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

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

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

и тот ДЕМОНСТРАЦИЯ

что он делает, так это

Он просматривает документ в поисках любых тегов “img“ или ”input" с классом “ro”.Повторное изображение должно иметь то же имя, что и обычное изображение, но с "_o” в конце.Например, изображение с опрокидыванием для “image.gif” будет “image_o.gif”.После нахождения всех тегов изображений скрипт предварительно загружает все изображения для переноса и объявляет события “наведение курсора мыши” и “вывод курсора мыши”.

Answer 4

Переход изображения с плавным затуханием с помощью jQuery объясняет некоторые способы подхода к этому..

Answer 5

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

http://css-tricks.com/fade-image-within-sprite/