Question

我还在学习如何编码，所以我完全接受任何建议，即缩进，重构等。

问题是我在jQuery中创建了一个自定义模糊功能，并且我创建了一个重置功能，以便在滚动事件发生后，div中的模糊图像将重置。但是，似乎立即调用了重置函数，使其看起来除了滚动到单独的部分之外什么也没发生。

守则：

    // 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

看起来reset()调用正在点击事件之外发生。

不应该看起来更像：

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

另外，如果调用重置功能的速度太快，那么您可以尝试使用setTimeout()调用它5秒钟（或者您认为多长时间）：

setTimeout(reset(), 5000);

所以这样结束：

$('#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

这是一个超时功能的工作示例。

＆＃13;

// 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);
});

＆＃13;

<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>

＆＃13;

在点击事件之前触发自定义jQuery模糊功能

2 个答案: