Fade a div when clicking on javascript: history.back ()

Question

I loaded the fadeIn css animation, but when I click the close button, the block (naturally) disappears with the flash. Is there a way to change the animation when the user clicks the close link button (with javascript value: history.back ())?

Demo

#showme:target {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

Answer 1

I would use jquery for the animation part, but I'm not sure why you will use this animation with history.back (). The following solution eliminates many additional css.

HTML:

<div id="showme" style="display:none;">
    <p>I'm showing</p>
    <p><a href="#" id="close">Close</a></p>
</div>

<div id="wrapper">
    <a id="show" href="#">Show</a>
</div>

JS:

$('#close').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeOut('slow');
});

$('#show').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeIn('slow');
});

CSS

body {margin: 0;}

#showme {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
}

script: http://jsfiddle.net/cmqg7cyf/4/

Answer 2

This can be done using the jQuery fadeOut function.

- , CSS, . - , .

$('#showme').fadeOut(duration, function () {
    history.back();
});

​​ .