CODEWITHSUNDEEP
jqueryfade
Art Williams
Art Williams

Reputation: 72

Content fade in on rollover

I am using this image effect for my icon links http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

What I plan is, that when you hover over an icon (which is the image effect above) it will reveal a small amount of content below it at the same pace as that image effect.

I am a beginner with javascript but love learning new and creative ways within it. I suppose I am more of a copy & paste guy.

Any help is hugely appreciated!

EDIT: code :)

Here is the javascript function on the page for the icons to fade in. (they work)

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

Here is my html for the icons

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

Then I want my content to do fade in when rolled over that icon. Here is my content but it just shows on the page as normal.

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

I hope this gives a better idea

Upvotes: 2

Views: 350

Answers (1)

aWebDeveloper
aWebDeveloper

Reputation: 38352

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

Upvotes: 1

Related Questions