내용 내 아이콘이 이미지 효과를 사용하고 롤오버

Question

을에 페이드 링크 http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

내가 계획하는 것은 당신이 (위의 이미지 효과 인) 아이콘 위에 마우스를 올려 때 소량을 드러내입니다 그 이미지 효과와 같은 속도로 그 아래의 내용을

저는 초심자이지만 자바 스크립트로 새롭고 창조적 인 방법을 배우는 것을 좋아합니다. 나는 & 붙여 넣기 녀석의 사본 인 것을 가정한다.

도움을 주시면 대단히 감사하겠습니다!

편집 : 여기에 코드 :

는 아이콘이 페이드 할 페이지의 자바 스크립트 함수입니다 (그들이 작동) 여기

<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>