Question

以下是我在两个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();
});

Answer 1

您可以将选项传递给hide和show：

.hide({duration: 500 /* ms */});
.show({duration: 500 /* ms */});

Answer 2

hide / show函数的第一个参数对应于持续时间（以毫秒为单位）。

Answer 3

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

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

Answer 4

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

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

Answer 5

如果你想在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
}

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

Answer 6

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

我看到你的问题相当陈旧。当你提出这个问题时，或许所有这些都不存在。

jQuery翻转速度

HTML：

JS：

6 个答案: