jQuery脚本问题：元素隐藏2秒后自动显示功能失效求助

嘿，我一眼就看出问题啦！你这段代码没法正常运行的核心原因是setTimeout回调里的this指向不对～

当你在img的点击事件里用$(this)，它确实指向被点击的图片元素，但setTimeout的回调函数是在全局作用域执行的，这里的this会自动变成window对象，自然找不到要重新显示的元素了。

下面给你三种可行的解决方案：

方案1：提前保存元素引用 #

把点击的元素先存到一个变量里，这样在setTimeout里就能直接调用了，这是最稳妥的传统写法：

$(document).ready(function() {
  $('img').click(function() {
    // 把当前点击的img元素保存到变量里
    var $targetImg = $(this);
    $targetImg.fadeOut();
    // 注意需求是2秒，这里要改成2000毫秒哦
    setTimeout(function() {
      $targetImg.fadeIn();
    }, 2000);
  });
});

方案2：用ES6箭头函数 #

箭头函数不会改变this的指向，它会继承外层作用域的this，代码更简洁：

$(document).ready(function() {
  $('img').click(function() {
    $(this).fadeOut();
    setTimeout(() => {
      $(this).fadeIn();
    }, 2000);
  });
});

方案3：利用jQuery fadeOut的回调函数 #

其实jQuery的fadeOut方法本身支持动画完成后的回调，如果你想在隐藏动画结束后等待2秒再显示，可以这么写：

$(document).ready(function() {
  $('img').click(function() {
    $(this).fadeOut(function() {
      // 隐藏完成后，等待2秒再执行显示
      setTimeout(() => {
        $(this).fadeIn();
      }, 2000);
    });
  });
});

另外提醒下，你原来的代码里setTimeout写的是1000毫秒（1秒），如果需求是隐藏2秒后显示，记得改成2000毫秒哦～

内容的提问来源于stack exchange，提问作者Nicole