jquery與淡入淡出和文字mouseover

首先，我不得不說我沒有任何編碼經驗，但會試圖解釋我想達到什麼目的。jquery與淡入淡出和文字mouseover

我用下面的代碼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幅圖像（快速/慢速/或無）
的鼠標懸停
在圖像淡化，格式文本（字體/對齊/頂部底部中心/背景/不透明）之後，在鼠標懸停上添加顯示文本與在鼠標懸停上的淡入/淡出（快/慢/無）

我真的在黑暗中飛翔:)任何幫助將非常感激。

乾杯

來源

2012-03-17 pckeys

試試這個：

假設你有一個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過渡：用CSS3和jQuery.hover作爲後備的即

來源

2012-03-17 05:30:17 Nemoy

非常感謝您的回覆

Here is a fiddle。使用你的例子，我將如何在鼠標懸停上添加顯示文字以及在圖像淡化之後的鼠標懸停（快/慢/無）上淡入/淡出，格式化文本（字體/對齊/頂部底部中心/背景/不透明） – pckeys 2012-03-18 03:26:16

你可以使用相同的邏輯。相應地構建你的html並在'.hover'函數中使用它 – Nemoy 2012-03-18 05:57:08

jquery與淡入淡出和文字mouseover

回答

相關問題