jQuery的如何做一个翻转的效果呢？(jquery how to do a flip effect

我试图模仿你在哪里有一个面板的移动设备通常被发现的效果，当u点击一个按钮，它打转，并在另一边有其他一些信息。

我发现一些usses 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的它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:

使用CSS变换的好处是它运行速度更快，（一旦你不需要把所有的样式五次），这将是非常优雅。缺点是，它不会在所有在某些浏览器正常工作（不CSS即老的浏览器变换支持）。

就个人而言，我会使用CSS转换。您的代码会更好看随着年龄的增长和移动不差。

我要猜猜你的jQuery的“翻译”失败的原因是没有被翻译代码删除现有的类，但他们是由纯JavaScript，所以：

$（ '＃侧-2'）removeClass（）addClass（ '...'）。;

如果你看一下jQuery的选择 - 他们隐藏的div内容，然后旋转的彩色矩形，然后重新注满格。 CSS的方法，当它工作，实际工作。

Answer 3:

关于当前的代码。为什么它不工作你，因为类之间切换时，它不使用任何动画希望它简单的方式的原因。您可以使用jQuery UI为。

如下图所示： http://jqueryui.com/docs/switchClass/