logo标签列表

jQuery如何实现翻转效果？

javascriptjqueryflipjquery-effects
6
我正在尝试模仿通常在移动设备上找到的效果，在该效果中，您将拥有一个面板，当单击按钮时，它会围绕着旋转，并且在另一侧具有其他信息。
我发现了一些使用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';

to

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

我不确定是否已经有更好的jQuery插件来完成这个任务。

有什么想法吗?

更多代码:

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

​

3个回答
8
我赞同这个观点，这个库使用简单且非常快速。 - andrewpthorp
3
使用这个插件时，我从来不喜欢内容在翻转时消失。这是一个很好的脚本，可以轻松支持多种浏览器。但如果你想要更好的效果，可以使用CSS transforms和transitions来实现像这样的效果：http://css3playground.com/flip-card.php - Jasper
可能还可以添加一些缓动效果，但我还没有测试过这个理论。如果能稍微改善一下，那就太棒了。有些jQuery翻书插件在翻页时会出现灰色或白色的虚假背景，以消除这种情况，因此也许这种方法也是可行的。 - Ryan
插件真是太棒了。 - Yogesh Lakhotia
我简直不敢相信这是被接受的答案！如果你跟随链接，基本上就是一个 404 或其他错误页面。因为这个原因被下投票了。 - luis.madrigal
这篇答案是7年前写的。当时它是一个很好的答案。注意发布日期会有所帮助。这是我链接到该页面的那天页面的样子。https://web.archive.org/web/20120408154820/http://lab.smashup.it/flip/ 如果你按照页面上的链接，代码仍然可以在Github上找到。 - Ryan
1
使用CSS变换的好处是它运行速度更快，而且（一旦您不需要将所有样式重复五次），它会非常优雅。缺点是它在某些浏览器上根本无法工作（即不支持CSS变换的旧浏览器）。
个人而言，我会使用CSS变换。您的代码随着时间的推移会变得更好，在移动设备上也不会变差。
我猜测您的jQuery“翻译”失败的原因是已有的类没有被翻译后的代码删除，但纯JavaScript可以删除，所以： $('#side-2').removeClass().addClass(' ... ');
如果您查看jQuery选项-它们隐藏div的内容，然后旋转彩色矩形，然后重新填充div。当CSS方法起作用时，它实际上是有效的。
0
关于当前的代码。它不能按照您想要的方式工作的原因很简单，因为在类之间切换时没有使用任何动画效果。您可以使用jQuery UI来实现。
如下所示：http://jqueryui.com/docs/switchClass/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接