jquery - CSS 3D フリップ jQuery

Question

任意のボックスをmouseoverめくると、facebook や twitter のビデオ リールなどがフリップ後に鏡面反射のように見えます。クロムのみです。一方、Firefox では期待どおりに動作しています。

ここに私のウェブページがありますhttp://luutaa.co.in/TMcollection/

それを解決するための解決策を教えてください。

Answer 1

あなたのコメントから：

ミラーテキストを非表示にしたい場合は、次のようにしてください

を行うときは、ブロックmouseoverを非表示にします.fbbtn

$('.fbbtn').hide();

そしてそれcallbackを見せるために

$('.fbbtn').show();

あなたがアイデアを得たことを願っています。

更新：さらに調査したところ、これを適用する適切な場所が見つかりました

$('.thumb').hover(function () {
   $(this).find('.fbbtn').hide();  //HIDE UPON HOVER
    $(this).find('.thumb-detail').stop().animate({
        bottom: 0
    }, 500, 'easeOutCubic');
},

function () {
    $(this).find('.fbbtn').show();  //SHOW IT IN CALLBACK
    $(this).find('.thumb-detail').stop().animate({
        bottom: ($(this).height() * -1)
    }, 500, 'easeOutCubic');
});

Answer 2

簡単な修正は、これを CSS に追加することです。

.flipIt .fbbtn{
    display:none;
}

ボックスをホバーするとちらつきが発生しますが、それが受け入れられないと感じる場合は、@ user1671639 の回答を実装し、おそらくタイマーを使用して、CSS アニメーションが完了した後にのみボタンを表示する必要があります。