0

オブジェクト： 1文字だけを画像ロゴに置き換えたいヘッダータイトルがあります。

問題：それを使って作業し<span>た後、どういうわけか私のデザインが破壊されます。つまり、線が途切れ、文字が適切に置き換えられず、別の場所に表示されます。私はそれがポジショニングであることを知っていますが、多くのアプローチが真っ直ぐに流れ落ちました。誰かアイデアがありますか？

私のスクリプト、非常に基本的：

<script type="text/javascript">
      $(function() {
            $('#logo span').fadeOut(7000);
            $('#logo span 2').fadeIn(2000);
      });
    </script>

私のcss：

 <style>
     #logo .span 2 {display:none}
    </style>

私のhtml：

<!-- Header & Call to Action Area -->
<div id="logo"><a href="index.html">Mundo<img class="logo" src="pictures/logos/logo_mundo_krone_header.png" width="100" height="56" alt="logo kundo gourmet puerto varas,restaurant puerto varas,puerto varas lujo,extravagante puerto varas" /><br />Gour<span><span class="2"><img src="pictures/logos/logo_mundo_krone_header.png" width="100" height="56" /></span>m</span>et</a></div>
4

1 に答える 1

1

ああ...ここで何が問題なのかがわかります。あなたが言っているspan 2、文字通り。これは有効なセレクタではありません。あなたがする必要があるのは次のとおりです。

$('#logo span').eq(0).fadeOut(7000);

jQuery はゼロから始まるインデックスを使用します。ここでは、最初のスパンをフェードアウトさせたいことを jQuery に伝えています。

$('#logo span').eq(1).fadeIn(2000);

ここでは、2 番目のスパンにフェードインするように指示します。

一般的に言えば、これらのタイプの効果は を使用して結合されcallback functionsます。

$('#logo span').eq(0).fadeOut(7000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(2000);
});

これからここに来る人への補足として

.eq()jQueryセレクターであるjQueryの代わりに、シズルセレクターであるjQueryを使用しまし:eq()た。その理由は、pureが要素を見つけるために DOM をトラバースする必要がsizzle selectorsあるメソッドを活用できるからです。上記の例では、これはおそらくあまり節約にはなりませんが、全体として、多くのトラバースを行う場合、このキーノートは重要です.querySelectorAll()jQuery selectors

于 2012-09-29T02:08:14.443 に答える