jQuery mouseover с затуханием и текстом

Question

Во-первых, я должен сказать, что у меня нет никакого опыта кодирования, но попытаюсь объяснить, что я пытаюсь добиться.

У меня есть следующий код с 2 изображениями ... blue.png - цветное изображение bluebw.png такое же изображение в черно-белом режиме. Код просто меняет изображения на мыши.

<script type='text/javascript'> 
$(document).ready(function(){ 
    $(".blue").hover(function() { 
     $(this).attr("src","files/blue.png"); 
      }, function() { 
     $(this).attr("src","files/bluebw.png"); 
    }); 
}); 
</script> 

<a href="page-1.html"> 
<img src="files/bluebw.png" alt="dresses" class="blue" height="300" width="170" /> 

То, что я хотел бы сделать, это следующее:

• добавить опцию для проявки/на наведении курсора мыши из 2-х изображений (быстро/медленно/или без него)

• добавить текст отображения на мышь с выцветанием в/в наведении мыши (быстрый/медленный/или нет) после того, как изображение исчезнет, ​​форматируйте текст (шрифт/выравнивание/верхний нижний центр/фон/непрозрачность)

Я действительно летаю в темноте :) Любая помощь будет очень оценена.

Приветствия

Answer 1

Попробуйте это:

Предположим, у вас есть HTML-структуру, как это:

<div id="element" style="position:relative;"> 
    <img src="image1.gif" id="img1" /> 
    <img src="image2.gif" id="img2" style="display:none" /> 
</div> 

и CSS:

img { 
    position:absolute; 
    top:0; 
    left:0; 
} 

JQuery код:

$("#element").hover(function() { 
    //fadeout first image using jQuery fadeOut 
    $("#img1").fadeOut(200); 
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200); 
}, function() { 
    //fadeout second image using jQuery fadeOut 
    $("#img1").fadeIn(200); 
    //fadein first image using jQuery fadeIn 
    $("#img2").fadeOut(200); 
}); 

Here is a fiddle для демонстрации

Или вы можете использовать переход CSS3:

Here is a fiddle с использованием CSS3 и jQuery.hover в качестве запасного варианта для т.е.