0

選択に問題があると思います。実際、同じサイズ（前面と背面）の他の2つのdivを含むdivがあります。カードの両面があるように、クリック時のイベントを作成したいと思います。クリック時にカバー/表示するだけでフリップ効果は必要ありません。

これに関連する私のhtml：

enter code here`enter code here`<ul id="boxes">
    <li></li>
    <li></li>
    <li></li>
    <li class="rotate">
<div class="flip-container">
<div class="front">
<img src="kuh.jpg">
</div>  
<div class="back">
<p>Oohh...behave!"Austin Powers"</p>
</div>
</div>      
</ul>

enter code here$(function() {

これはjQueryになります。クラス「goaway」を追加すると、z-index -2にそれぞれの要素が設定され、背後のdivが明らかになります。CSSで設定してみました。

$("#boxes li").on("click", function(){
    if($(this).next(".front").hasClass("goaway")){
        $(this).next(".front").removeClass("goaway");
    }else{
        $(this).next(".front").addClass("goaway");  
    }
});

便利なリンクをありがとう。これは正しい方向だと確信していますが、なぜうまくいかないのか理解できません。

BR

およびfadeToggle、delay、clearQueueおよびstopを備えた新しいJS。

$(function() {$("#boxes li").on("click", 
function(){$(this).find(".front,.back").clearQueue().stop().fadeToggle(800)
.delay(10000).fadeToggle(800);});});

liをより頻繁にクリックすると、期待どおりに機能が停止しますが、10秒後に戻るように切り替えます。各ステップを廃止するので、表側を表示する必要があると思いました。

4

2 に答える 2

0

Working demo with required CSS to show it works properly http://jsfiddle.net/VRu6X/1/

Small amount of jQuery required

$("#boxes li").on("click", function(){
    $(this).find('.front,.back').toggleClass('goaway');
});

HTML, needs back to start with having class goaway

<ul id="boxes">
    <li class="rotate">
        <div class="flip-container">
            <div class="front">
                FRONT
           </div>  
            <div class="back goaway">
                BACK
            </div>
        </div>      
    </li>
</ul>

EDIT

"One more thing, as the transition is quite rough I was looking for an option to switch classes more smoothly. could I apply some fading on your solution"

You can show and hide more smoothly
Set back to not show

    <div class="flip-container">
        <div class="front">
            FRONT
       </div>  
       <div class="back" style="display:none">
            BACK
       </div>
    </div>

and use fadeToggle() http://jsfiddle.net/VRu6X/2/
or slideToggle() perhaps http://jsfiddle.net/VRu6X/3/

$("#boxes li").on("click", function(){
    $(this).find('.front,.back').fadeToggle(1000);
});

Alternatively, you could flip the card http://jsfiddle.net/VRu6X/5/

<ul id="boxes">
    <li class="rotate">
        <div class="flip-container">
            <div class="front">
                <img src="http://www.madore.org/~david/images/cards/english/king-clubs.png" />
           </div>  
           <div class="back" style="display:none;">
                <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" />
            </div>
        </div> 
    </li>
</ul>

CSS

#boxes li{
    display:block;
}
.flip-container{
    position:relative;
}
.flip-container div{
    z-index:2;
    position:absolute;
    height:200px;
    width:130px;
}

.front img, .back img{
    width:100%;
    height:100%;
}

JS

$("#boxes li").on("click", function(){
    //$(this).find('.front,.back').slideToggle(500);
    var $showing=$(this).find('.front:visible, .back:visible');
    var $notshowing=$(this).find('.front:not(:visible), .back:not(:visible)')
    $showing.animate({height:0, marginTop:100}, 300, function(){
        $(this).hide();
        $notshowing.show().css({height:0, marginTop:100}).animate({height:200, marginTop:0}, 300);
    });
});

Please note the height and margins in the jQuery are set rather than being looked up, so if you change the CSS you'll have to change that to, or do it the right way (letting jQuery discover the height the first time)

于 2013-03-07T00:14:14.213 に答える
0

z-indexをリセットしてみましたか？

.comehere { z-index: 2; }

$(document).on('click', '.flip-container', function() {
    $(this).child('.front').toggleClass('comehere').toggleClass('goaway');
}
于 2013-03-07T00:10:08.183 に答える