1

私はQuickflip 2を使用して、すべて同じラッパー クラス .quickFlip を共有する複数の「フリップ パネル」を作成しています。

その中には 2 つの「状態」があり、これらは .blackPanel (「onload」と表示される) と .redPanel です。これは逆の状態です... または代替の「状態」 - QuickFlip は、単純なアニメーションでこれらの状態を反転させる魔法を行います (明らかにこれは IE 8 > Safari、Firefox、および Chrome で動作します... 良いもの?!)

問題があります:複数 (最大 9 つ) を扱っているため、新しいパネルを選択するときに、開いているすべてのパネルを自動的に閉じる (またはリセット) したいと考えています。

コード：

    $(function() {
    $('.quickFlip').quickFlip();
    $('.redPanel').on('mouseleave',function(){
 $('.quickFlip').quickFlipper( {}, 0 );
  });
});​

http://jsfiddle.net/sMYzS/152/での実際の例を次に示します。

ただし...この例では、パネルがどのような状態であっても、すべてのパネルでアニメーション (フリップ) を実行します。

答えは、.quickFlipper 関数をアクティブな (jQuery で言えますか?) クラス / エリア以外のすべてに適用することにあると確信しています。私が完全に失われたように聞こえたら申し訳ありません。

私はjqueryが初めてで、.each/.mouseoverを使用して調査し、javascript:onclickを使用して各非アクティブ状態を「非表示」にするさまざまな関数を追加しました...しかし、私は今迷っています。15 時間ハッキングした後、私はここに来ることに決めました。ここは長年にわたって素晴らしいリソースを見つけてきました。あなたが私を正しい方向に向けることができれば、それは素晴らしいことです. ありがとう！

以下は、私の要件を満たすために変更しようとした同様のハックです: jQuery Quick Flip switch back

Quickflip 2 プラグイン - 画像を 1 回だけ反転しますか?

4

1 に答える 1

1

このフィドルは、あなたが抱えている問題を修正します:

上記のコードでは、この行

$('.quickFlip').quickFlipper( {}, 0 );

クラス「quickFlip」を持つすべての要素、つまりすべてのパネルに作用します。

デフォルトでは、プラグインは「quickFlipCta」クラスのリンクのクリックを監視するため、これらの要素に別のハンドラーを追加して、クリック時に「反転」クラスをラッパー div に追加しました。

$('.quickFlipCta').click(function() {
    $(this).parents('.quickFlip').addClass('flipped');
});

これで、クラス「quickFlip」で反転を解除する代わりに、代わりに「反転」クラスで反転を探し、反転が解除されたらクラスを削除できます。

$('.redPanel').on('mouseleave', function() {
    $('.flipped').quickFlipper({}, 0);
    $('.flipped').removeClass('flipped');
});

ただし、別のパネルをクリックするまでパネルを反転したままにしたい場合は、代わりにそれを行うための Fiddle があります。

今回は、反転/反転のロジックはすべてクリック ハンドラーに含まれています。うまくいけば、そこで何が起こっているかがコメントで明らかになります。

于 2012-10-17T10:25:25.727 に答える