jQuery：延迟替换 div 的 innerHTML？

Question

我正在尝试使用 jQuery 淡出一个元素，替换其 innerHTML 并在替换内容后将其淡入。使用.html()-方法和.find()-方法替换元素的内容是可行的，但是一旦我尝试向查找和放置innerHTML的函数添加延迟，它就会停止工作.到目前为止，这是我的代码：

'#current-title' 是应该替换其内容的元素； '#title1' 包含应该以 '#current-title' 结尾的文本。在放置新文本之前和之后，所有这些都应该通过 '#current-title' 的过渡不透明度更改来实现。

$(document).ready(function() {
  $.replace = function() {

  $('#current-title').css("opacity", "0");

  setTimeout(function() {
    $('#current-title').html($(this).find('#title1').html());
  }, 500);

  setTimeout(function() {
    $('#current-title').css("opacity", "1");
  }, 1000);

  alert('Title has been replaced.');
  };

  $(".replace-btn").click(function() {
    $.replace();
  });
});

相同功能的简化版本，仅替换'#current-title' 的html 而没有setTimeout，效果很好：

$(document).ready(function() {
  $.replace = function() {

    $('#current-title').html($(this).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn").click(function() {
    $.replace();
  });
});

为什么我的第一段代码中的setTimeout 不起作用？

---

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      $('#current-title').html($(this).find('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 1000);

    setTimeout(function() {
      alert('Title has been replaced.');
    }, 1000);
  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {

    $('#current-title').html($(this).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

Answer 1

这是一个使用jQuery.fadeOut 然后jQuery.fadeIn 的简单示例：

$(document).ready(function() {
  var count = 0;
  $( "p" ).click(function() {
    ++count;
    $this = $(this);
    $this.fadeOut(500, function() {
      $this.html("Project Title #" + count);
      $this.fadeIn(500);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Project Title #0</p>

运行代码sn-p，然后每次点击项目标题，它就会淡出，编号递增，然后淡入。

Answer 2

在您的代码中，没有setTimeout，this 指的是window 对象。 window.find 将在当前窗口中搜索字符串。它不会搜索文档中的元素。 Refer this

setTimeout`方法中的this返回一个函数对象。

所以您的代码在删除 this 后可以工作。

这行得通。

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      //console.log(this) returns the window object
      $('#current-title').html($('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 1000);


  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {
    //console.log(this); returns a function object
    $('#current-title').html($('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

Answer 3

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      $('#current-title').html($(document).find('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 800);

    setTimeout(function() {
      alert('Title has been replaced.');
    }, 1000);
  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {

    $('#current-title').html($(document).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

这里的$(this) 指的是窗口对象。要获取处理程序，您需要使用 $(document) 对象

试试看