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

回答

相关问题