我希望能够实现与此示例相同的翻转效果:
http://jsfiddle.net/lakario/VPjX9/
唯一的区别是我希望在单击时而不是通过按钮来翻转两个div(page1,page2)之间的页面。
以下是代码:
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:
$('#go').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();
});