JQuery FadeTo IMG SRC при наведении

Question

JQuery FadeTo IMG SRC при наведении

0

Так что прямо сейчас у меня это:

$('#logo').hover(
function(){
  $(this).attr('src','img/logo-hover.jpg');
},
function(){
  $(this).attr('src','img/logo-grey.jpg');
}

Это работает, но я хотел добавить к нему эффект затухания. Я пробовал несколько итераций fadeTo, fadeIn, fadeOut и посмотрел несколько примеров опрокидывания (большинство из которых кажутся слишком сложными для того, что я хочу делать здесь), но я не могу заставить это работать. Все примеры, которые я видел, также уменьшают исходное изображение перед тем, как принести новый, который мне не нужно делать.

Каков самый чистый способ добавить этот эффект?

Чтобы привести пример с помощью CSS: http://jsfiddle.net/Nu5kb/ Мне нужен этот эффект, за исключением использования вместо него 2 изображений

-Thanks

Tyler 20 янв. 2014, в 10:56

Источник

Теги:

javascript

jquery

image

animation

fade

2 ответа

Ещё вопросы

Tschitsch · Answer 1 · 2014-01-20T07-22-00.000Z

Вы также можете попробовать css-переходы, но это, вероятно, не будет работать в каждом браузере

#logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 128px;
    height: 128px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;    
}

#logo1 {
    opacity: 1;
}

#logo2 {
    opacity: 0;
}

#logo:hover #logo1 {
    opacity: 0;
}

#logo:hover #logo2 {
    opacity: 1;
}

http://jsfiddle.net/TYVTb/5/

Arun P Johny · Answer 2 · 2014-01-20T06-49-00.000Z

Вы можете использовать fadeTo()/fadeIn() и fadeOut(), чтобы сделать это

$('#logo').hover(function () {
    $(this).stop(true, true).fadeTo('normal', .1, function () {
        $(this).attr('src', '//placehold.it/64/ff0000').fadeTo('normal', 1);
    });
}, function () {
    $(this).stop(true, true).fadeTo('normal', .1, function () {
        $(this).attr('src', '//placehold.it/64/0000ff').fadeTo('normal', 1);
    });
});

Демо: скрипка

Это работает, но затухает оригинал, прежде чем вводить новый, так что между тем, когда исчезает логотип, есть промежуток времени, которого я пытался избежать. Чтобы привести пример того, что я пытаюсь сделать, но вместо этого использую css: jsfiddle.net/Nu5kb, за исключением использования того же типа эффекта с двумя изображениями
@ Тайлер, исчезает ли проблема только в первый раз или появляется каждый раз? ли изображения связаны