jqueryフリップ効果を行うには？

Question

あなたはパネルを持っているモバイルデバイスに通常見られるエフェクトを模倣しようとしています。ボタンをクリックすると、スピンし、反対側には他の情報があります。

私はこの例でCSSの遷移とhere is an example

JS

$('#signup').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip flip-side-1'; 
    document.getElementById('side-1').className = 'flip flip-side-2'; 

}); 

$('#create').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip'; 
    document.getElementById('side-1').className = 'flip'; 

}); 

問題をussesいくつかのコードを見つけましたが、私はjqueryのにはJavaScriptを変換する場合、それが働いてstoppsことです：

から：

document.getElementById('side-2').className = 'flip flip-side-1'; 

~

$('#side-2').addClass('flip flip-side-1'); 

もっと良い方法でこれを行うjqueryプラグインがまだないかどうかわかりません。

アイデア？

いくつかのコードがあります。 HTML

<div id="side-1" class="flip"> 
    <a id="signup" href="#">sign up</a> 
</div> 
<div id="side-2" class="flip"> 
    <a id="create" href="#">create</a> 
</div> 

CSS

.flip { 
    backface-visibility:    hidden; 
     -moz-backface-visibility: hidden; 
     -ms-backface-visibility:  hidden; 
     -o-backface-visibility:  hidden; 
     -webkit-backface-visibility: hidden; 
    border: 1px solid black; 
    transform-origin:    50% 50% 0px; 
     -moz-transform-origin: 50% 50% 0px; 
     -ms-transform-origin:  50% 50% 0px; 
     -o-transform-origin:  50% 50% 0px; 
     -webkit-transform-origin: 50% 50% 0px; 
    transition: all 1s; 
     -moz-transition: all 1s; 
     -ms-transition:  all 1s; 
     -o-transition:  all 1s; 
     -webkit-transition: all 1s; 
} 

#side-1 { 
    transform:    rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     -ms-transform:  rotateY(0deg); 
     -o-transform:  rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
} 

#side-2 { 
    transform:    rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -ms-transform:  rotateY(180deg); 
     -o-transform:  rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
} 

.flip-side-1 {  
    transform:    rotateY(0deg) !important; 
     -moz-transform: rotateY(0deg) !important; 
     -ms-transform:  rotateY(0deg) !important; 
     -o-transform:  rotateY(0deg) !important; 
     -webkit-transform: rotateY(0deg) !important; 
} 

.flip-side-2 { 
    transform:    rotateY(180deg) !important; 
     -moz-transform: rotateY(180deg) !important; 
     -ms-transform:  rotateY(180deg) !important; 
     -o-transform:  rotateY(180deg) !important; 
     -webkit-transform: rotateY(180deg) !important; 
} 

Answer 1

http://lab.smashup.it/flip/は、私がこれを見つけた最高です。

Answer 2

現在のコードについてクラスを切り替えるときにアニメーションを使用していないため、単にそれが望むように機能しない理由です。そのためにjQuery UIを使用することができます。

は、ここに示されている：http://jqueryui.com/docs/switchClass/

Answer 3

CSSを使用して変換の逆が、それはより速く実行され、（あなたが5回ですべてのスタイルを配置する必要はありません一度）、それは非常にエレガントになりますです。欠点は、一部のブラウザ（つまり、CSS変換をサポートしていない古いブラウザ）では動作しないことです。

個人的には、私はCSS変換を使用します。あなたのコードは、年齢とともにモバイルで悪くないほどよく見えます。 （

$：

私はあなたのjQueryの「翻訳」は失敗した理由は、既存のクラスは、変換されたコードによって除去されていないことであると野生の推測を取るよ、しかし、彼らはそう、純粋なJavaScriptのです'＃side-2'）。removeClass（）。addClass（ '...'）;

jQueryのオプションを見ると、divの内容が隠されているので、色付きの四角形を回転させてからdivを補充します。 CSSメソッドが動作するときは、が実際にになります。