2

クリックすると、すべてをオーバーレイする大きな divが表示される小さなdivがいくつかあります - ライトボックスのようなものです。大きな divを非表示にするために、それをクリックします (「これを閉じる」リンクはありません)。

クリックコードは次のとおりです。

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeIn(500);
                    $('.compositos_lightboxBackground').fadeIn(500);
                    // Second click - draw back
                    $(this).on('click', function(){
                        $('.compositos_DBitem_lightbox', this).fadeOut(500);
                        $('.compositos_lightboxBackground').fadeOut(500);
                    });
                });
});

.compositos_lightboxBackgroundは div をオーバーレイする背景であり、.compositos_DBitem_lightboxは大きなdivです。

問題は、大きな divをクリックした後(表示されている場合)、大きな div の領域を離れないと、フェードアウトして元に戻ることです。クリックしてマウスをすばやく離すと、機能します。

どうしたの？

フィドル

ペドロ

4

1 に答える 1

1

fadeToggle現在のところ、イベントに追加の関数を繰り返しバインドしているため、 を使用する方が適していclickます。

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeToggle(500);
                    $('.compositos_lightboxBackground').fadeToggle(500);
                });
});

fadeToggle前のコードで実行しようとしていたことを正確に実行しますが、clickイベントにバインドできるのは 1 回だけです。

以前は、コードでフェードアウトをクリック イベントにバインドし、クリックするとすぐに実行されていました。以前にクリック イベントにバインドした他の関数 (アニメーション) も同様です。アニメーションは、終了時にコールバックを実行します...これにより、「ライトボックス」divが再び表示されました。

于 2013-05-15T17:02:53.113 に答える