Сброс анимации

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

.fullscreen элемента еще накладывание, obsucring следующих кликов.

В последней функции, измените последнюю строку

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

Так что на самом деле исчезает. Как here.

Answer 2

Смотреть это JSFiddle

Как вы можете видеть, я заменил fadeTo на FADEOUT, который не скрывает блок после гаснуть.

$(".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); 
});