0

以下は、2つの間を切り替えるために作成したコードです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

このフィドルのように、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

hideとにオプションを渡すことができますshow:

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

hide/show 関数の最初の引数は、ミリ秒単位の期間に対応します。

于 2012-11-26T09:24:45.073 に答える