3

我在这里有一个简单的 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，最终结果看起来很好，这意味着没有新行，但我想要淡入淡出效果.

4

3 回答 3

1

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

/* Line 28 of layout.css */
#home img {
  width:0px;
  margin-right:10px;
  display:inline!important;
}
于 2012-04-29T06:15:50.210 回答
0 
#home img {
  float: left;
  margin-right: 10px;
  width: 0;
}
于 2012-04-29T06:11:42.857 回答
0

添加以下代码：

#home img {
  width:0px;
  margin-right:10px;
  display:block;
  float:left;
}
于 2012-04-29T06:14:40.693 回答