Reduce opacity of div upon clicking javascript:history.back()

Question

Reduce opacity of div upon clicking javascript:history.back()

I have successfully implemented a fadeIn CSS animation, but I am facing an issue where the block disappears abruptly when I click the close button. Is there a way to reverse the animation when the user clicks the "close" link (which triggers javascript:history.back())?

Check out the demo here

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

html css fadein

Answer 1

Answer №1

If you're looking to add some nice animations, why not consider using jQuery? However, it's important to think about the purpose behind incorporating animations with the history.back() function. The code snippet below provides a solution that avoids excessive CSS.

Here is the HTML code:

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

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

For the JavaScript part:

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

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

And here's the necessary CSS:

body {margin: 0;}

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

You can view the interactive example on fiddle: http://jsfiddle.net/cmqg7cyf/4/

Answer 2

If you're looking to add some nice animations, why not consider using jQuery? However, it's important to think about the purpose behind incorporating animations with the history.back() function. The code snippet below provides a solution that avoids excessive CSS.

Here is the HTML code:

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

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

For the JavaScript part:

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

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

And here's the necessary CSS:

body {margin: 0;}

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

You can view the interactive example on fiddle: http://jsfiddle.net/cmqg7cyf/4/

Answer 3

Answer №2

To achieve this effect, simply incorporate the jQuery fadeOut method.

The initial argument denotes the duration of one second as stated in your CSS code. The subsequent argument is a callback function that executes once the fade out operation is complete.

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

This particular line should be included within the event handler for when the close button is clicked.

Best of luck!

Answer 4

To achieve this effect, simply incorporate the jQuery fadeOut method.

The initial argument denotes the duration of one second as stated in your CSS code. The subsequent argument is a callback function that executes once the fade out operation is complete.

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

This particular line should be included within the event handler for when the close button is clicked.

Best of luck!

Reduce opacity of div upon clicking javascript:history.back()

Answer №1

Answer №2

Similar questions

Using the mouse scroll to activate the $anchorScroll effect in Angular instead of a click

Why is Bootstrap taking precedence over my CSS body styles?

Completing a third-party htaccess file

Can a collapse that was saved in a separate file be displayed on the requested page?

Can flexbox be utilized on iPhone 4/iOS4, or is there a backup option available?

The newly added radio button does not function as a separate group as expected

Dynamically Growing Navigation Bar Elements with Nested Subcategories Based on Class Identification

Updating style of an element by hovering over another

Flex containers positioned next to each other without overlapping and adjusting in relation to one another

Javascript - issue with accurately retrieving element offset value while scrolling

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

Protecting Your Data with Python Web Scraping Techniques

A guide to customizing the appearance of Textfield labels in Material-UI using React

Issues with jQuery horizontal sliding gallery functionality

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

What is the reason for having both "DOCTYPE: HTML5" and "HTML5" options in the web toolbar of VS 2012 RC?

Single-use condition for checkbox functionality in JavaScript

Issue with div:after transition not functioning in Safari

Retrieving the height of the HTML body once all data has finished loading in AngularJS

The problem with styling a CSS button text