A small script to show and hide an element based on the event of css transition end

ShowHideTransitionEnd.js

var COVER;
var Cover;
(function($) {
    COVER = function() {
        // private
        var __ = this;
        var $cover = $('#cover');
        var isShowing = false;
        
        // public
        __.show = function(callback) {
            isShowing = true;
            return (function() {
                $cover.on('transitionend', function(evt) {
                    if(isShowing) {
                        console.log('showing ended');
                        if(callback) {
                            callback()
                        }
                    }
                });
                $cover.css({ display: 'block'});
                setTimeout(function() { $cover.css({ opacity: 1 }); }, 100);
            })();
        };
        
        __.hide = function(callback) {
            isShowing = false;
            return (function() {
                $cover.on('transitionend', function(evt) {
                    if(!isShowing) {
                        console.log('hiding ended');
                        $cover.css({display: 'none'});
                        if(callback) {
                            callback();
                        }
                    }                      
                });
                $cover.css({ opacity: 0 });
            })();
        };
        return __;
    };
    Cover = new COVER();
})(jQuery);

setTimeout(function() {
  Cover.hide(function() {
    console.log('called back');
  });
}, 1000);

  setTimeout(function() {
    console.log('showing')
    Cover.show(function() { console.log('called back again') });
  }, 3000);