CODEWITHSUNDEEP
jquerycssanimationclickfade
Andy
Andy

Reputation: 1432

Animation reset

I have the following code that, when the blue block is clicked, animates an overlay in (with a second block) which then animates back out when it is clicked a second time. Click the blue block a second time and it doesn't work because the overlay is not hidden. I tried throwing another .hide() in there but it broke the animation. Any help would be appreciated.

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);
});
});

Upvotes: 0

Views: 123

Answers (3)

Jerska
Jerska

Reputation: 12002

See this JSFiddle

As you can see, I replaced the fadeTo by fadeOut, which does hide the block after the fading out.

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

Hoping that it is what you asked for.

Upvotes: 1

Ali Bassam
Ali Bassam

Reputation: 9959

When you're changing the opacity to 0, the .fullscreen is still actually above the blue box, so when you click the next time, you're actually clicking the .fullscreen and not the blue box, so you can do the following:

Initially, make it always opacity: 0.5; and hide it display:none;.

And in JQUERY, use .fadeIn(500) and .fadeOut(500) to show and hide the .fullscreen but with a smooth effect.

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

Upvotes: 1

JNF
JNF

Reputation: 3730

The .fullscreen element is still overlaying, obsucring the next clicks.

In the last function, change the last line to

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

So it really disappears. Like here.

Upvotes: 1

Related Questions