jquery如何做翻转效果？

我试图模仿通常在你有一个面板的移动设备上找到的效果，当你点击它旋转的按钮时，在另一边它有一些其他信息。

我发现了一些使用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

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

http://lab.smashup.it/flip/是我发现的最好的。

使用CSS转换的好处是它会运行得更快（一旦你不需要将所有样式放在五次），它将非常优雅。 缺点是它根本不适用于某些浏览器（即没有CSS转换支持的旧版浏览器）。

就个人而言，我会使用CSS转换。 您的代码在年龄和移动设备上看起来会更好看。

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

$（’＃side-2’）。removeClass（）。addClass（’…’）;

如果你看一下jQuery选项 – 它们隐藏了div的内容，然后旋转一个彩色矩形，然后重新填充div。 CSS方法在工作时实际上有效。

关于当前的代码。 之所以没有按照你想要的方式工作只是因为它在类之间切换时没有使用任何动画。 您可以使用jQuery UI。

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

Interesting Posts