Image FadeIn mouseover jquery [Archive]

IFiallo

03-23-2010, 07:09 PM

I need to get these images to fade in above said image when I move my mouse over them with jquery; can anyone help?

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery-1.3.2.js"></script>
<title>Picture Gallery</title>
<script language="javascript">
$(document).ready(function(){
$("ZooZebra.gif", "tiger.jpg", "graff.jpg", "boys with dog.jpg").hover(function(){
//perform fadeIn here
$('zebra').fadeIn("slow");
$('tiger').fadeIn("slow");
$('graff').fadeIn("slow");
$('boysdog').fadeIn("slow");
});

});
</script>
</head>

<body>
<p> </p>
<hr />
<p> </p>
<div class="hover">
<p><img src="ZooZebra.gif" alt="" width="50" height="50" class="zebra" /></p>
<p><img src="tiger.jpg" alt="" width="50" height="50" class="tiger" /></p>
<p><img src="graff.jpg" alt="" width="50" height="50" class="graff" /></p>
<p><img src="boys with dog.jpg" width="50" height="50" class="boysdog" /></p>
</div>
</body>
</html>

accwebworks

03-23-2010, 08:31 PM

Make sure you're using jQuery 1.4.2

Take this out.
------------------------------

<script language="javascript">
$(document).ready(function(){
$().hover(function(){
//perform fadeIn here
$('zebra').fadeIn("slow");
$('tiger').fadeIn("slow");
$('graff').fadeIn("slow");
$('boysdog').fadeIn("slow");
});

});
</script>
-----------------------
and replace it with

<script language="javascript">
$(document).ready(function(){
$(".zebra, .tiger, .graff, .boysdog").hover(
function(){ $(this.fadIn('fast'); }, function() { $(this).hide(); } );

});
</script>