Question

我在这里有一个简单的jQuery fadeIn / Out脚本：

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

使用CSS：

#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;
}

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

您可以在此处查看最终结果：http://michaelherbig.com/jaystern/index.php

这个问题是，当你将鼠标悬停在链接上时，它似乎会在淡入的图像之后添加一个新行。没有JavaScript，最终结果看起来很好，这意味着没有换行，但我想要褪色效果。

Answer 1

动画期间，您的图片被设置为display:block。通过以下方式防止这种情况：

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

Answer 2

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

Answer 3

添加以下代码：

#home img {
  width:0px;
  margin-right:10px;
  display:block;
  float:left;
}

jquery fadeIn将图像移动到新行

3 个答案: