jQuery翻转速度

下面是我为在两个

div

之间切换而编写的代码

如何控制翻转动作的速度

代码如下：

HTML: 您可以将选项传递给和：

---

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

您可以简单地使用jQuery的

hide（）

和

show（）

方法，就像在这把小提琴中一样，看看：

---

翻转效果是否使用CSS3变换？然后您可以像这样指定转换持续时间：

转换：

---

请参阅：

如果您希望更快或更慢地更改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
}

---

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

我刚刚做了类似的事情。我从CDN下载了jquery flip插件。然后我为我的所有照片制作了一个“照片”类的div，每张照片都有一个“正面”和“背面”类的div，以及它们的内容。主CSS应转到主分区“照片”。在Github上解释，还有其他的。 js代码很简单。您可以向插件添加各种属性，也可以提高速度。

$（函数（）{
$（“.flip”）.flip（{
触发器：“单击”，
速度：1000
});
});

---

我看你的问题有点老了。当您询问时，可能所有这些都还不存在。

没有翻转代码可供查看。如果你想隐藏和显示具有特定毫秒时间的页面，那么使用.show（200）和.hide（200）。问题是，一旦我在hide（）和show（）中添加任何数字，填充运动看起来很奇怪。请发布Filping代码以查看。我在我的问题上发布了它们，这里是：太棒了！如果你投赞成票，或者接受它作为答案，或者两者兼而有之，这会更大。

$('.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();
});​

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

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