After resetting transition, div stays visible; no new transition


I'm trying to make a <div> display and then fade out, on button click.

This works so long as the user waits for the fade to complete between <button> presses.

My problem is, if the <button> is clicked while the fade is ongoing, the <div> needs to immediately reappear, and then fade out.

I've managed to get it to immediately reappear, but now it doesn't fade out again.

To get an easier idea of what I'm doing, take a look at the JSFiddle I've setup.

Can anyone help me get this to fade out if clicked whilst already fading out?

I'm only targeting .

<div id="saved">Saved!</div>
<button id="save">Save</button>

function save()
    // Little "Saved!" div
    var div = document.getElementById('saved');

    // If still showing from previous save
    if( === 'visible')
        resetTransition(); = 'visible';
        // = 0;

    // On transition end
    div.addEventListener('webkitTransitionEnd', resetTransition);

    function resetTransition()
        // Disable transitions
        div.className = 'notransition';

        // Hide the div and reset the opacity = 'hidden'; = 1;

        // Need time to let CSS changes (^) refresh
            // Re-enable transitions
            div.className = '';

            // Remove the event listener by way of cloning
            var dolly = div.cloneNode(true);
            div.parentNode.replaceChild(dolly, div);
        }, 1);

    // Show the div and fade out - on timer due to "if still showing" needing
    // to process first
    { = 'visible'; = 0;
    }, 1);

document.getElementById('save').addEventListener('click', save);

    -webkit-transition: opacity 1.25s ease-out;
    -webkit-transition-delay: 0.75s;
    background-color: #FFC;
    /* Courtesy of */
    background-image: url('');
    background-position: 3px 4px;
    background-repeat: no-repeat;
    border: 1px solid #333;
    border-radius: 6px;
    left: 5px;
    opacity: 1;
    padding: 10px 4px 10px 52px;
    position: absolute;
    top: 5px;
    visibility: hidden;
    width: 68px;

    -webkit-transition: none !important;
    -webkit-transition-delay: none !important;

    position: absolute;
    top: 100px;
Problem courtesy of: Danny Beckett


I updated your fiddle, moving the cloning to the top and clearing the timeout.

// Little "Saved!" div
var dolly = document.getElementById('saved');
// Remove the event listener by way of cloning
var div = dolly.cloneNode(true);
dolly.parentNode.replaceChild(div, dolly);

/* etc til */
save.t = setTimeout(/* */);
Solution courtesy of: kalley


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.