內容淡入側翻

Question

我使用我的圖標此圖像效果鏈接 http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

我的計劃是，當你將鼠標懸停在圖標（這是上面的圖像效果）就會露出少量的內容低於它的速度與圖像效果相同。

我是一名JavaScript初學者，但很喜歡學習新的創意方法。我想我更多的是複製&粘貼的人。

任何幫助非常感謝！

編輯：代碼:)

這裏是頁的圖標中淡出的javascript函數（他們的工作）

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "normal"); 
}); 

}); 
</script> 

這裏是我的圖標HTML

<div class="fade_con_about"><div class="fadehover"><a class="biofadein"><img src="clean/img/aboutbtn_up.png" class="a" alt="about"/></a><a class=""><img src="clean/img/aboutbtn_down.png" class="b" alt="about"/></a></div></div> 

。

然後我希望我的內容在滾動該圖標時淡入。這是我的內容，但它只是正常顯示在網頁上。

<div class="textual"> 
<h1><a href="http://" target="_blank">My Blog</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.<br/> 
<a href="#">3 hours ago..</a></p> 
</div> 

我希望這給一個更好的主意

Answer 1

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.a").hover(
function() { 
$(this).stop().animate({"opacity": "0"}, "slow"); 
$('.textual').fadeIn("slow"); 
}, 
function() { 
$(this).stop().animate({"opacity": "1"}, "normal"); 
$('.textual').fadeOut("slow"); 
}); 

}); 
</script>