3

ここの例と同じようにフリップしたい：

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

私が望む唯一の違いは、2つの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 に答える