0

下面是我为在两个之间翻转而编写的代码div，

如何控制翻转动作的速度？

这是代码：

HTML：

<button type="button" id="go">FLIP</button>
<div class="container">
    <div class="page1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod mauris       metus, ac consectetur felis. Cras consectetur, est vel malesuada faucibus, ligula enim suscipit elit, ut ornare quam urna quis felis. In hac habitasse platea dictumst.
    </div>
    <div class="page2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel       condimentum varius, nibh nunc 
    </div>
</div>

JS：

$('.container').click(function() {
    var page1 = $('.page1');
    var page2 = $('.page2');
    var toHide = page1.is(':visible') ? page1 : page2;
    var toShow = page2.is(':visible') ? page1 : page2;

    toHide.removeClass('flip in').addClass('flip out').hide();
    toShow.removeClass('flip out').addClass('flip in').show();
});​
4

6 回答 6

0

如果您希望它在此处的 css 中更快或更慢地更改：

.flip.out {
   -webkit-transform: rotateY(-90deg) scale(.9);
   -webkit-animation-name: flipouttoleft;
   -webkit-animation-duration: 250ms;        // here
   -moz-transform: rotateY(-90deg) scale(.9);
   -moz-animation-name: flipouttoleft;
   -moz-animation-duration: 250ms;           // here
}
.flip.in {
   -webkit-animation-name: flipintoright;
   -webkit-animation-duration: 525ms;       // here
   -moz-animation-name: flipintoright;
   -moz-animation-duration: 525ms;          // here
}

如果这有帮助，请检查这个。

于 2012-11-26T10:40:49.150 回答
0

您可以将选项传递给hideand show：

.hide({duration: 500 /* ms */});
.show({duration: 500 /* ms */});
于 2012-11-26T09:23:03.147 回答
0

隐藏/显示函数的第一个参数对应于以毫秒为单位的持续时间。

于 2012-11-26T09:24:45.073 回答
0

您可以简单地使用jQuery 的hide()和show()方法，就像在这个小提琴中一样，看看：

http://jsfiddle.net/YqhpS/26/

于 2012-11-26T09:38:53.913 回答
0

您是否使用 CSS3 变换来实现翻转效果？然后您可以像这样指定过渡持续时间： transition: <property> <duration> <timing-function> <delay>

请参阅：https ://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions

于 2012-11-26T09:41:37.293 回答
0

我刚刚做了类似的事情。我从 CDN 下载了 jquery 翻转插件。然后我为我的所有照片制作了一个带有“照片”类的 div，每张照片都有一个 div 类“正面”和“背面”及其内容。主 CSS 应该转到主 div 'photo'。在例如 Github 上解释过，还有其他的。js代码很简单。您可以为插件添加各种属性，也可以添加速度。 <script> $(function(){ $(".flip").flip({ trigger: 'click', speed: 1000 }); }); </script>

我看到你的问题很老了。当你问它时，也许这一切还不存在。

于 2016-05-21T10:38:04.560 回答