圖像褪色

我能得到一些幫助，在這裏請圖像褪色

我得到的工作只有一個圖像的代碼，但不能爲不同內容的多個圖像

HTML

<ul id="base"> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
</ul>

CSS

.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;} 
.element img { 
     position:absolute; 
     top:0; 
     left:0; 
     height:150px; 
     width:150px; 
    } 
.content {height:150px;width:150px;background:gray;font-size:9px;}

jQuery的

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

和測試http://jsfiddle.net/nQvay/1/小提琴，需要一些幫助

來源

2013-02-08 Francis Alvin Tan

您必須指定其.img1和.content你想成爲褪色

$(".element").hover(function() { 
      //fadeout first image using jQuery fadeOut 
      $(this).children(".img1").fadeOut(300); 
      //fadein second image using jQuery fadeIn 
      $(this).children(".content").fadeIn(300); 
     }, function() { 
      //fadeout second image using jQuery fadeOut 
      $(this).children(".img1").fadeIn(300); 
      //fadein first image using jQuery fadeIn 
      $(this).children(".content").fadeOut(300); 
     });

來源

2013-02-08 11:24:26

你好，進出口與這個jQuery不是很好，但如果你可以更新小提琴，會被罰款 – 2013-02-08 11:27:39

http://jsfiddle.net/nQvay/26/，CSS也改變 – 2013-02-08 11:50:22

感謝，它的工作 - TaronPro – 2013-02-09 06:49:03

試試這個

JSFIDDLE

$(document).ready(function(){ 
$(".element").hover(function() { 
      //fadeout first image using jQuery fadeOut 
      $(".element").children(".img1").fadeOut(300); 
      //fadein second image using jQuery fadeIn 
      $(".element").children(".content").fadeIn(300); 
     }, function() { 
      //fadeout second image using jQuery fadeOut 
      $(".element").children(".img1").fadeIn(300); 
      //fadein first image using jQuery fadeIn 
      $(".element").children(".content").fadeOut(300); 
     }); 
});

來源

2013-02-08 11:27:58 Nandu

盒子上的兩個內容同時出現，當懸停時只有一個盒子顯示內容時，它可能是... – 2013-02-08 11:32:34

<ul id="base"> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
</ul> 


<style> 
ul{ 
padding:0px; 
margin:0px; 
list-style:none; 
} 
.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;position:relative;} 
.element img { 
     position:absolute; 
     top:0; 
     left:0; 
     height:150px; 
     width:150px; 
    } 
.content {height:150px;width:150px;background:gray;font-size:9px;} 
</style> 


<script> 
$(".element").hover(function() { 
     //fadeout first image using jQuery fadeOut 
     $(this).children(".img1").fadeOut(300); 
     //fadein second image using jQuery fadeIn 
     $(this).children(".content").fadeIn(300); 
    }, function() { 
     //fadeout second image using jQuery fadeOut 
     $(this).children(".img1").fadeIn(300); 
     //fadein first image using jQuery fadeIn 
     $(this).children(".content").fadeOut(300); 
    }); 
</script>

來源

2013-02-08 18:36:31

回答

相關問題