翻转

Question

我想有相同的翻转事情在这里的例子：

http://jsfiddle.net/lakario/VPjX9/

唯一不同的，我想是两个div的之间的翻转（第1页，第2页） - 当我点击时，而不是按钮。

这里是代码：

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

Answer 1

你的JavaScript就改成这样：

$('.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 2

简单，只需更新你的点击选择从$('#go')到$('.page1, .page2')：

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

DEMO