title: Custom jQuery blur function firing before click event
body: <p>I'm still learning how to code, so I'm totally open to any advice, i.e indentation, refactoring, etc. </p>
  
  <p>The problem is that I've created a custom blur function in jQuery and I've created a reset function so that after a scrolling event occurs the blurry image in the div will reset. However, it appears that the reset function is being immediately invoked making it appear that nothing is happening other than a scroll to a seperate section. </p>
  
  <p><strong>The Code:</strong></p>
  
  <pre><code>    // This function resets blur:
  
      var reset = function() {
           $('#fullscreen-hero').css({
             "opacity": "1",
             "filter": "none",
             "-webkit-filter": "none",
             "-moz-filter": "none"
           });
         };
  
      // this function blurs home_background then scrolls down to 
      // expertise section:
  
      var blur = $('#scrollDown').click(function(event){
           event.preventDefault();
           $('html, body').animate({ scrollTop: $('#me').offset().top }, 880);
           $('#fullscreen-hero').css({
              "opacity": "0.6",
              "filter": "blur(4px)",
              "-webkit-filter": "blur(4px)",
              "-moz-filter": "blur(4px)"
           });
         });
  
        // Calling reset function here:
  
      reset();
  </code></pre>