jquery - 内容在鼠标悬停时淡入

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>