Question

我有以下代码，当单击蓝色块时，动画覆盖（使用第二个块），然后在第二次单击时动画回退。再次单击蓝色块，它不起作用，因为未隐藏叠加层。我尝试在那里抛出另一个.hide()，但它打破了动画。任何帮助，将不胜感激。

<div class="box">
</div>

<div class="fullscreen">
    <div class="content_box">
    </div>
</div>

CSS

.box {
    position: absolute;
    z-index: 1000;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 50px;
    cursor: pointer;
    background-color: blue;
}
.fullscreen {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: orange;
}
.content_box {
    position: absolute;
    z-index: 3000;
    top: 150px;
    left: 400px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    background-color: yellow;
    opacity: 0;
}

JQuery的

$(function(){
    $('.fullscreen').hide();
});
$(function(){
    $(".box").click(function(){
        /* Fades in overlay */
        $(".fullscreen").fadeTo(500,.5);
        $(".content_box").show().animate({left: 200, opacity: 1},400);
});
});
$(function(){
    $(".fullscreen").click(function(){
        /* Fades in overlay */
        $(".content_box").show().animate({left: 400, opacity: 1},400);
        $(".fullscreen").fadeTo(500,0);
});
});

Answer 1

.fullscreen元素仍然重叠，模糊了下次点击。

在最后一个功能中，将最后一行更改为

$(".fullscreen").fadeTo(500,0,function(){$(this).hide();});

所以它真的消失了。与here一样。

Answer 2

请参阅此JSFiddle

正如你所看到的，我用fadeOut替换了fadeTo，它在淡出后隐藏了块。

$(".fullscreen").fadeOut(500);

希望这是你要求的。

Answer 3

当您将不透明度更改为0时，.fullscreen实际上仍然位于蓝框之上，因此当您下次点击时，您实际上是在点击.fullscreen而不是蓝色框，以便您可以执行以下操作：

最初，请始终opacity: 0.5;并将其隐藏display:none;。

在JQUERY中，使用.fadeIn(500)和.fadeOut(500)来显示和隐藏.fullscreen但效果平稳。

$(".box").click(function(){
        /* Fades in overlay */
    $(".fullscreen").fadeIn(500);
    $(".content_box").show().animate({left: 200, opacity: 1},400);
});
$(".fullscreen").click(function(){
        /* Fades in overlay */
        $(".content_box").show().animate({left: 400, opacity: 1},400);
    $(".fullscreen").fadeOut(500);
});

LIVE DEMO

动画重置

3 个答案: