3

ここに簡単な jQuery フェードイン/アウト スクリプトがあります。

$(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 に答える