3

これはおそらく何度も尋ねられました（私はそれを見つけることができませんでした）。

私には4つのリンクがあり、それらはすべて、情報を含む独自の「div」に対応しています。私がしたいのは（最初のdivがデフォルトで表示されます）、2番目のリンクをクリックすると、最初のdivがフェードアウトし、2番目のdivが（他の同じ場所で）フェードインします。フェードイン/フェードアウトは（ある意味で）機能しましたが、それらはすべて積み重なって、奇妙な動きをします。助けていただければ幸いです。jsfiddleにテストファイルを配置しました。私のjqueryもおそらく少し厄介です。

http://jsfiddle.net/buScL/

4

5 に答える 5

1

div に絶対位置を追加すると、これが修正されます。他の div をフェードアウトするためにクラスを使用することも検討する必要があります。コードの見栄えを良くするだけです。

http://jsfiddle.net/mTKFJ/

于 2012-08-08T18:21:24.233 に答える
0

すべてのdivにクラスを与えてからpositon:absolute;

これにより、それらがすべて上下に重なるため、フェードアウト/フェードインすると、同じ場所で発生します。

.content {
    position: absolute;
}

デモ

于 2012-08-08T18:17:46.413 に答える
0

アンカーのテキストを使用してターゲットを選択できます。次のことを試してください。

  $("#controlls a").click(function () {
      var id = $(this).text().toLowerCase().replace(' ', "")
      $('#'+id).fadeIn().siblings('div').fadeOut()
  });

デモ

于 2012-08-08T18:20:59.797 に答える
0

問題は、フェージング効果がすべて同時に発生しようとしていることです。コールバックを使用すると、順序をより厳密に制御できます。このJS Fiddle、または以下の同一のコードを参照してください。フェードが同時に起こるとなぜ醜いのですか？ブロックは通常の流れで自然に積み上げられます。フェードアウトの過程にある場合でも、フロー内のスペースを占有します。display:noneフェードが有効になるとき、フェードの最後にそのスペースを解放するだけです。交換用のボックスがそれをフェードするとき、最終的なスペースの解放まで、通常の位置よりも下に配置されます。それが醜い方法でトップに戻ってくるときです。フェードトグルに関する jQuery のドキュメントを確認し、コールバック セクションを確認してください (フェードインとフェードアウトは同じように機能します)。

<div id="hello"> hello world! </div>
<div id="goodbye"> goodbye world! </div>

Javascript:

 ​$("#hello").click(function(){
        $(this).fadeToggle("slow", function(){
           $("#goodbye").fadeToggle("slow"); //Here is a callback
        });           
    });


$("#goodbye").click(function(){
    $(this).fadeToggle("slow", function(){
       $("#hello").fadeToggle("slow") //Here is a callback
    }) ;             
});
    ​

CSS:

div{
    width:100px;
    height:100px;
}

#hello{
    background-color:red  ; 
}

#goodbye{
    background-color:blue;
    display:none;

}
于 2012-08-08T18:30:52.357 に答える
0

html を次のように変更します。

HTML

<div id="wrapper">

  <ul id="controlls">  
      <li><a href="#" id="one" class="dealer">Dealer</a></li>
      <li><a href="#" id="two" class="advertise">Advertise</a></li>
      <li><a href="#" id="three" class="social">Social Media</a></li>
      <li><a href="#" id="four" class="need">Need</a></li>
  </ul>

  <div id="slider">
        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>

次の jQuery コードを使用します。

jQuery

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('class'); // get class of clicked anchor tag
    // first fadeOut the visible div
    $('#slider div:visible').fadeOut(500, function() {
        // after fadeOut complete show target div
        $('div#' + id).fadeIn();
    })
});

作業サンプル

ノート

ここでは、コールバック関数fadeIn()内でを作成する必要があるため、 の直後に発生します。fadeOut()fadeIn()fadeOut()

于 2012-08-08T18:26:17.857 に答える