Javascript jQuery：延迟替换div'；什么是innerHTML？

我试图使用jQuery淡出一个元素，替换它的

innerHTML

，并在内容被替换后淡入。使用

.html（）

-方法和

.find（）

-方法替换元素的内容是可行的，但当我试图为查找和放置

innerHTML

的函数添加延迟时，它就停止工作。这是我目前的代码：

“#当前标题”

是应该替换其内容的元素

“#title1”

包含应该以

“#当前标题”

结尾的文本。在放置新文本之前和之后，所有这些都应该在转换后的不透明度更改

“#当前标题”

时发生

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

不起作用

---

$（文档）.ready（函数（）{
$.replaceDelayed=函数（）{
$（'#当前标题'）.css（“不透明度”，“0”）；
setTimeout（函数（）{
$（'#当前标题'）.html（$（this.find（'#title1'）.html（））；
}, 500);
setTimeout（函数（）{
$（'#当前标题'）.css（“不透明度”，“1”）；
}, 1000);
setTimeout（函数（）{
警报（“标题已被替换”）；
}, 1000);
};
$（“.replace btn”）。单击（函数（）{
$.replaceDelayed（）；
});
});
$（文档）.ready（函数（）{
$.replaceNormal=函数（）{
$（'#当前标题'）.html（$（this.find（'#title1'）.html（））；
警报（“标题已被替换”）；
};
$（“.replace-btn2”）。单击（函数（）{
$.replaceNormal（）；
});
});
.title{
可见性：隐藏；
}
* {
过渡：不透明度0.3s；
}

项目名称#0


项目名称#1


替换标题（延迟）
替换标题（立即）

$（文档）.ready（函数（）{
$.replaceDelayed=函数（）{
$（'#当前标题'）.css（“不透明度”，“0”）；
setTimeout（函数（）{
$（'#当前标题'）.html（$（文档）.find（'#标题1'）.html（））；
}, 500);
setTimeout（函数（）{
$（'#当前标题'）.css（“不透明度”，“1”）；
}, 800);
setTimeout（函数（）{
警报（“标题已被替换”）；
}, 1000);
};
$（“.replace btn”）。单击（函数（）{
$.replaceDelayed（）；
});
});
$（文档）.ready（函数（）{
$.replaceNormal=函数（）{
$（'#当前标题'）.html（$（文档）.find（'#标题1'）.html（））；
警报（“标题已被替换”）；
};
$（“.replace-btn2”）。单击（函数（）{
$.replaceNormal（）；
});
});
.title{
可见性：隐藏；
}
* {
过渡：不透明度0.3s；
}

项目名称#0


项目名称#1


替换标题（延迟）
替换标题（立即）
下面是一个简单的示例，使用then：


$（文档）.ready（函数（）{
var计数=0；
$（“p”）。单击（函数（）{
++计数；
$this=$（this）；
$this.fadeOut（500，function（）{
$this.html（“项目标题#”+count）；
$this.fadeIn（500）；
});
});
});

项目标题#0
在您的代码中，没有
设置超时
，
此
指的是
窗口
对象<代码>窗口。查找将在当前窗口中搜索字符串。它不会在文档中搜索元素

此
在setTimeout`方法中返回函数对象

因此，在删除
此
后，您的代码可以正常工作

这很有效


$（文档）.ready（函数（）{
$.replaceDelayed=函数（）{
$（'#当前标题'）.css（“不透明度”，“0”）；
setTimeout（函数（）{
//log（这个）返回窗口对象
$（'#当前标题'）.html（$（'#标题1'）.html（））；
}, 500);
setTimeout（函数（）{
$（'#当前标题'）.css（“不透明度”，“1”）；
}, 1000);
};
$（“.replace btn”）。单击（函数（）{
$.replaceDelayed（）；
});
});
$（文档）.ready（函数（）{
$.replaceNormal=函数（）{
//log（this）；返回函数对象
$（'#当前标题'）.html（$（'#标题1'）.html（））；
警报（“标题已被替换”）；
};
$（“.replace-btn2”）。单击（函数（）{
$.replaceNormal（）；
});
});
.title{
可见性：隐藏；
}
* {
过渡：不透明度0.3s；
}

项目名称#0


项目名称#1


替换标题（延迟）
替换标题（立即）
我们可以使用html代码吗？@ChandraShekhar当然可以，等一下，我会设置一个JSFIDLE并将其添加到question@JoSchStackoverflow有一个内置提琴，您可以使用它。这会让人们更好、更容易回答你的问题。那里肯定发生了一些奇怪的事情。将代码嵌入stacksnippet会挂起页面。如果您感兴趣，请查看修订历史：@JoSch您不需要自己处理不透明度或超时，我的答案基本上只使用了3行jQuery代码：fadeOut、html、fadeIn、job done。也不需要JSFIDLE，请运行代码段以查看它是否正常工作。
$.replaceNormal
会导致Chrome崩溃。@Turnip请立即尝试此工作。。。