Question

我将此图像效果用于我的图标链接 http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

我的计划是，当您将鼠标悬停在图标上方（上面的图像效果）时，它会以与图像效果相同的速度显示其下方的少量内容。

我是javascript的初学者，但喜欢在其中学习新的和创造性的方法。我想我更像是一个副本＆amp;贴人。

非常感谢任何帮助！

编辑：代码：）

这是页面上用于淡入图标的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>

内容在翻转时淡入

1 个答案: