Question

我认为我有选择的问题。实际上我有一个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并停止的新JS。

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

当在li上更频繁地点击时，它将按照预期的那样支持该功能，但是在10秒之后延迟切换到后面。我认为它会支持每一步，因此应该显示正面。

Answer 1

您是否尝试过重置z-index？

.comehere { z-index: 2; }

$(document).on('click', '.flip-container', function() {
    $(this).child('.front').toggleClass('comehere').toggleClass('goaway');
}

Answer 2

使用必需的CSS进行演示，以显示其正常运行http://jsfiddle.net/VRu6X/1/

需要少量的jQuery

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

HTML，需要重新开始课堂外出

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

修改

＆＃34;还有一件事，因为转换非常粗糙，我正在寻找一种更顺畅地切换课程的选项。我可以对您的解决方案应用一些淡入淡出＆＃34;

您可以更流畅地展示和隐藏
回到不显示

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

并使用fadeToggle() http://jsfiddle.net/VRu6X/2/
或slideToggle()或许http://jsfiddle.net/VRu6X/3/

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

或者，您可以翻转卡片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); }); });

请注意jQuery中的高度和边距是设置而不是被查找，所以如果你改变CSS你必须改变它，或者以正确的方式做（让jQuery发现高度第一次）

在li元素中选择div并在li-click上执行操作

2 个答案: