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: demo-one

ОБНОВЛЕНИЕ: Вот более общее решение (неполное, но показывает некоторые идеи): демо-два . Просто добавьте класс «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

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

http://css -tricks.com / нарастающие изображения внутри-спрайт /

Answer 4

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

Answer 5

внутри $(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» с классом «Ро». Изображение ролловера должно быть назван так же, как нормальное изображение, но с «_o» в конце. Например, изображение ролловера для «image.gif» будет «Image_o.gif». После нахождения всех теги изображения, скрипт предварительно загружает все ролловер изображения и реклама События mouseover и mouseout.