单击div时在两个div之间翻转
我希望在示例中有与此相同的翻转内容：
http://jsfiddle.net/lakario/VPjX9/
唯一不同的是我想要的是两个div之间的翻转（page1，page2） – 当我点击然后点击而不是按钮时。
这是代码：
HTML: 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel condimentum varius, nibh nunc 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(); }); 很简单，只需将您的点击选择器从$('#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
只需将您的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(); });