jquery - 动画重置

Question

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

jsFiddle

<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

看到这个JSFiddle

如您所见，我将fadeTo 替换为fadeOut，它确实在淡出后隐藏了块。

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

希望这是你所要求的。

Answer 2

该.fullscreen元素仍在覆盖，掩盖了接下来的点击。

在最后一个函数中，将最后一行更改为

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

所以它真的消失了。喜欢这里。

Answer 3

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

最初，让它总是opacity: 0.5;并隐藏它display:none;。

而在JQUERY 中，使用.fadeIn(500)and.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);
});

现场演示