3

我想在示例中具有与此处相同的翻转功能：

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

2 回答 2

3

简单，只需将您的点击选择器从更新$('#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();
});​

演示

于 2012-11-25T17:51:37.107 回答
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();
});​
于 2012-11-25T17:51:27.447 回答