jquery 翻轉效果怎么做？

Question

我試圖模仿通常在您有面板的移動設備上發現的效果，當您單擊一個按鈕時它會旋轉，而在另一側它有一些其他信息。

我找到了一些使用 css 轉換的代碼，這是一個示例

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';

});

此示例的問題是，如果我將 javascript 轉換為 jquery，它會停止工作：

從：

 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

使用 CSS 轉換的好處是它會運行得更快，並且（一旦你不需要將所有 styles 放入五次）它會非常優雅。 缺點是它根本無法在某些瀏覽器上運行（即不支持 CSS 轉換的舊瀏覽器）。

就個人而言，我會使用 CSS 轉換。 您的代碼會隨着時間的推移看起來更好，並且在移動設備上不會更差。

我會大膽猜測您的 jQuery “翻譯”失敗的原因是現有類沒有被翻譯后的代碼刪除，但它們是由純 JavaScript 刪除的，所以：

$('#side-2').removeClass().addClass('...');

如果您查看 jQuery 選項——它們會隱藏 div 的內容，然后旋轉一個彩色矩形，然后重新填充 div。 CSS 方法，當它起作用時，它確實起作用了。

Answer 3

關於當前代碼。 它不能按照您希望的方式工作的原因僅僅是因為它在類之間切換時沒有使用任何 animation 。 您可以為此使用 jQuery UI。

此處顯示： http://jqueryui.com/docs/switchClass/