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);
});

這是演示的小提琴

或者您可以使用css3過渡：

這是使用css3和jQuery.hover作為IE的備用的小提琴