Question

I have a simple jQuery fadeIn/Out script here:

$(document).ready(
function(){         
    $("#home li").hover(
        function(){ $("img", this).fadeIn("400"); }, 
        function() { $("img", this).fadeOut("400"); } 
    );
});

With CSS here:

#home a:hover img{
  width:210px;
}

#home a {
  text-decoration:none;
  color:#000;
}

#home img {
  width:0px;
  margin-right:10px;
}

#home { 
  list-style: none;
  margin: 0;
  padding: 0;
  text-align:right;
  font-family: JeanLucWeb-Thin;
  font-size:75px;
  line-height:80%;
  text-decoration:none;
  color:#000;
}

And html:

<div id="main">
<center>
<ul id="home">
    <li><a href="news.php"><img src="images/header_1.png" alt=""/>NEWS</a></li>
    <li><a href="about.php"><img src="images/header_2.png" alt=""/>ABOUT</a></li>
    <li><a href="adventuresofpaulandmarian.php"><img src="images/header_3.png" alt=""/>FILM</a></li>
    <li><a href="bardybunch.php"><img src="images/header_4.png" alt=""/>THEATER</a></li>
    <li><a href="contact.php"><img src="images/header_5.png" alt=""/>CONTACT</a></li>
</ul>
</center>
</div>

You can view the end result here: http://michaelherbig.com/jaystern/index.php

This issue is that when you hover over the link, it seems to add a new line after the image that fades in. Without the JavaScript, the end result looks fine, meaning no new line, but I’d like to have the fade effect.

Answer 1

Your images are getting set to display:block during the animation. Prevent this with the following:

/* Line 28 of layout.css */
#home img {
  width:0px;
  margin-right:10px;
  display:inline!important;
}