Jquery fadeTo IMG SRC по наведению

Так что сейчас у меня есть это:Jquery fadeTo IMG SRC по наведению

$('#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 изображения вместо

-Спасибо

источник

2014-01-20 Tyler

Вы можете использовать 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); 
    }); 
});

Демонстрация: Fiddle

источник

2014-01-20 09:16:18

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

@ Тайлер возникает ли проблема исчезновения только в первый раз или приходит каждый раз? независимо от того, сделаны ли изображения –

Вы также можете попробовать 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/

источник

2014-01-20 09:28:46 Tschitsch

Jquery fadeTo IMG SRC по наведению

ответ

Смежные вопросы