jquery fadeIn将图像移动到新行

时间:2012-04-29 06:07:58

标签: jquery html css

我在这里有一个简单的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,最终结果看起来很好,这意味着没有换行,但我想要褪色效果。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

添加以下代码:

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