delayedReaction

by natedavisolds

HTML

<img id="testlaser" src="images/Laser.gif" alt="Login Laser">
  <div class="fingerprint">
  </div>
  <img class="access_denied" src="images/AccessDenied.jpg" alt="Access Denied!">

CSS

#testlaser{}
  .fingerprint{ border: 3px solid black; height: 300px; width: 300px;display:none;}
  .access_denied{color: red;display:none; }

JavaScript

(function($){
    $.fn.delayedReaction = function(successFunction, options) {
        var settings = $.extend({}, $.fn.delayedReaction.defaults, options);

        this.each(function() {
            var timeout,
                myFunction = successFunction,
                $this = $(this);
            
            var run_func = function() {
                myFunction.apply($this)
            };
            
            $this.bind(settings.startEvent, function() {
                timeout = setTimeout(run_func, settings.delayFor);
            });
            
            $this.bind(settings.stopEvent, function() {
                clearTimeout(timeout);
                timeout = null;
            });
        });

        return this;
    }

    $.fn.delayedReaction.defaults = {
        startEvent: 'mousedown',
        stopEvent: 'mouseup mouseleave',
        delayFor: 3000
    }

})(jQuery);

    $('.fingerprint').delayedReaction(function() { 
        $(".fingerprint").hide();
        $(".access_denied").show();
    });
    
    $("#testlaser").click(function() {
        $(".fingerprint").show();
        $(".access_denied").hide();
    });