翻轉

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