Custom jQuery blur function firing before click event

Question

I'm still learning how to code, so I'm totally open to any advice, ie indentation, refactoring, etc.

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.

The 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();

Answer 1

Looks like the reset() call is happening outside of the click event.

Shouldn't it look more like:

$('#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)"
    });
    reset();
});

Also, if the reset function is being called too quickly, then you could try using a setTimeout() which calls it 5 seconds (or however long you think) later:

setTimeout(reset(), 5000);

So ending up like this:

$('#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)"
    });
    setTimeout(reset(), 5000);
});

Answer 2

Here's a working example of the timeout function.

 // 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 var blur = $('#scrollDown').click(function(event) { event.preventDefault(); $('#fullscreen-hero').css({ "opacity": "0.6", "filter": "blur(4px)", "-webkit-filter": "blur(4px)", "-moz-filter": "blur(4px)" }); setTimeout(reset, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="fullscreen-hero" src="http://via.placeholder.com/350x150"> <div id="scrollDown">CLICK</div>