2

私は「スライドショー」を持っています...ある種の。divをフェードアウトさせてから、別のdivをフェードインさせようとしています。

問題は、新しいdivが表示される前に表示されているdivが完全に消えないことです。これにより、両方のdivが同時に存在する場合に厄介なフラッシュが発生します。

注：ラッパー（親）divをコンテンツとともに拡張する必要があるため、絶対配置を使用してdivをスタックすることはできません。divを絶対配置して「フロー」から外すと、これを達成できないようです。

JSfiddle：こちら。

これがhtmlです：

<a href="#" class="red">RED</a> 
<a href="#" class="blue">BLUE</a> 
<a href="#" class="green">GREEN</a> 
<a href="#" class="yellow">YELLOW</a>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="yellow"></div>

...CSS..。

#red, #blue, #green, #yellow{display:none; width:200px; height:200px;}
#red{background:red;}
#blue{background:blue;}
#green{background:green;}
#yellow{background:yellow;}

...そしてJQuery。

$('a.red').click(function() {
  $("#blue, #green, #yellow").hide('fade', function() {
      $("#red").show('fade');
  });
});

$('a.blue').click(function() {
  $("#red, #green, #yellow").hide('fade', function() {
      $("#blue").show('fade');
  });
});

$('a.green').click(function() {
  $("#red, #blue, #yellow").hide('fade', function() {
      $("#green").show('fade');
  });
});

$('a.yellow').click(function() {
  $("#red, #blue, #green").hide('fade', function() {
      $("#yellow").show('fade');
  });
});

私はこれをずっといじっています！どんな助けでも大歓迎です。

4

4 に答える 4

2

問題は、.hide()一致したすべての要素に対して実行され、一致した要素が表示されていない場合でもコールバックが実行されることです。この.filter()メソッドを使用することで、 `.hide（）'メソッド、つまりコールバックが1回だけ起動されるようにすることができます。これは、まだ何も表示されていない場合にケースをキャッチする必要があるため、コードが大きくなることを意味しますが、それは非常にうまく機能します。

この例は

$('a.red').click(function () {
    var elements = $("#blue, #green, #yellow").filter(":visible");
    if (elements[0]) {
        elements.fadeOut(function () {
            $("#red").fadeIn();
        });
    } else {
        $("#red").fadeIn();
    }
});

そして、あなたはこれがこのJSFiddleで完全に機能しているのを見ることができます

于 2013-03-15T12:05:31.453 に答える
1

問題は、「非表示」アニメーションがすでに非表示になっている要素に対してゼロ時間かかることであるように見えます。完全なコールバックは、アニメーションの終了時に1回だけでなく、シーケンス内の各要素に対して順番に発生します。したがって、アニメーションは非表示の要素に対して即座に完了し、完全なコールバックを即座に起動します。これを解決するために、要素のjQueryセレクターを微調整して、実際に表示されている要素のみがアニメーション化されるようにしました。

   $('a.red').click(function () {
       toggleVisibility("#blue, #green, #yellow", "#red");
   });

   function toggleVisibility(elementsToHide, elementsToShow) {
       var elements = $(elementsToHide).filter(':visible');
       if (elements.length) {
           // Hide visible elements first if there are any
           elements.fadeOut(function () {
               $(elementsToShow).fadeIn();
           });
       } else {
           // ...otherwise just show specified element directly
           $(elementsToShow).fadeIn();
       }
   }

そのため、コールバックは1回だけ発生します。

乾杯、アレックス

編集：すべての要素が最初は見えなかった場合は機能しませんでした。それに応じてコードを変更しました。また、新しいスニペットはより乾燥しています。

于 2013-03-15T11:39:07.517 に答える
0

これを使用.stop()すると、DOMでのアニメーションが停止します。

説明：一致した要素で現在実行中のアニメーションを停止します。

STOP

于 2013-03-15T10:59:19.957 に答える
0

考えられる解決策の1つは、新しいdivの表示を短時間遅らせて、他のアニメーションを最初に終了できるようにすることです。

.delay()

http://api.jquery.com/delay/

例えば：

$('a.red').click(function () {
   $("#blue, #green, #yellow").hide('fade', function () {

       $("#red").delay(500).show('fade');
   });
});

簡単な例を作成しました。ほとんどの場合はうまく機能しますが、両方が同時に表示されることがよくあります。微調整する必要があります: )http://jsfiddle.net/a7mCL/15/

于 2013-03-15T11:07:20.743 に答える