javascript jquery：fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5525960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: fadeOut().empty().append(...).fadeIn() doesn't work properly only the first time
提问by Pieter Breed
I'm struggling to understand why I'm getting the behaviour that I'm seeing. I have a piece of code that aims to fadeOut a container, replace the contents and then fade it back in again when it's done.
我正在努力理解为什么我会得到我所看到的行为。我有一段代码旨在淡出容器，替换内容，然后在完成后再次将其淡入。
I'm using jQuery, so the code looks like this:
我正在使用 jQuery，因此代码如下所示：
var transitionToNewContent = function(container, new_content) {
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};
transitionToNewContent($('#id'), "<p>magic</p>");
The first time that the link that activates this transition is clicked, the content is replaced instantly, then the fadeout happens, then it fades in again.
第一次单击激活此转换的链接时，内容会立即被替换，然后淡出发生，然后再次淡入。
Every time after that when the link is clicked, I'm seeing the correct behaviour: fadeout, then fadein with the new content.
之后每次点击链接时，我都会看到正确的行为：淡出，然后淡入新内容。
Any idea why this is happening?
知道为什么会这样吗？
I've attached a complete html file which shows the behaviour:
我附上了一个完整的 html 文件，它显示了行为：
I'm fairly new to jquery and I'm trying to do things 'the right way'. Any comments regarding style will be appreciated.
我对 jquery 还很陌生，我正在尝试以“正确的方式”做事。任何关于风格的评论将不胜感激。
<doctype html>
<html>
<head>
<style type="text/css">
#main_container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
margin-top: 0;
height: 100%;
position: relative;
top: 0px;
bottom: 0px;
}
#loading {
float: right;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
}
#sidebar {
float: left;
width: 240px;
border: #078600 1px dashed;
position: relative;
top: 10px;
left: -250px;
margin-right: 20px;
background: #cccccc;
z-index: 1;
padding: 10px;
font-size: 0.65em;
display: none;
}
#main_content {
z-index: 0;
position: absolute;
top: 0px;
left: 5px;
width: 100%;
height: 100%;
float: right;
background: white;
padding-top: 0;
padding-bottom: 3em;
padding-left: 20px;
border-right: 1px dotted #078600;
border-left: 1px dotted #078600;
border-top: 3px solid white;
}
</style>
<link rel="stylesheet" type="text/css" href="/main.css" />
</head>
<body>
<div id="main_container">
<div id="sidebar"><h1>Sidebar</h1><p>some text</p></div>
<div id="loading" style="display: none">&nbps;</div>
<div id="main_content">
<h1 id="page_title">Title</h1>
<div id="page_content"><h2>heading</h2><p>Some testing text</p></div>
</div>
</div>
<script type="text/javascript">
var include = function(src) {
document.write('<script type="text/javascript" src="' + src + '"></scr' + 'ipt>');
};
include("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js");
include("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js");
var bootStrapSites = function() {
var sideBar = $('#sidebar');
sideBar.delay(1000).fadeIn();
loadSiteList(sideBar);
};
var transitionToNewContent = function(container, new_content) {
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};
var editSite = function(site) {
transitionToNewContent($('#page_content'), "<p>This is where the magic will happen</p>");
};
var loadSiteList = function(container) {
// $.getJSON("/sites/list.json", function(data) {
var data = $.parseJSON('[{"id": "1", "name": "cool name"}]');
container.empty(container);
container.append("<h2>new heading</h2>");
container.append("<ul id='sitesList'></ul>");
var sitesList = $('#sitesList');
$.each(data, function(idx, site) {
var id = 'show_site_id_' + site._id;
sitesList.append("<li><a id='" + id + "' href='#'>" + site.name + "</a></li>");
$('#' + id).click(function() {
editSite(site);
});
});
// });
};
</script>
<script type="text/javascript">
$(document).ready(function() {
bootStrapSites();
});
</script>
</body>
</html>
回答by lonesomeday
The problem is that there are two different types of functions in jQuery -- those that take effect immediately and those that add effects to the effects queue.
问题是jQuery 中有两种不同类型的函数—— 那些立即生效的函数和将效果添加到效果队列的那些函数。
Let's take a look at your code:
让我们来看看你的代码：
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
fadeOutadds a fade operation to the queuedelayadds a delay to the queueemptyimmediately empties the elementappendimmediately appends the contentfadeInadds a fade operation to the queue
fadeOut向队列添加淡入淡出操作delay向队列添加延迟empty立即清空元素append立即附加内容fadeIn向队列添加淡入淡出操作
The functions that add items to the queue return immediately -- they don't wait to complete before taking effect. This means that all the functions are called at (pretty much) the same time -- they don't wait for the animation functions to complete.
将项目添加到队列的函数会立即返回——它们不会等待完成才生效。这意味着（几乎）同时调用所有函数——它们不等待动画函数完成。
You need to use the callback argument to fadeOutinstead:
您需要使用回调参数来fadeOut代替：
container.fadeOut(1000, function(){
container.empty().append(new_content).fadeIn();
});
The function is triggered when the fade operation is complete, so the emptying and appending are delayed until the element is hidden.
该函数在淡入淡出操作完成时被触发，因此清空和追加被延迟，直到元素被隐藏。
回答by Mark Brown
You need to use a callback function to get the effect you are looking for.
您需要使用回调函数来获得您正在寻找的效果。
var transitionToNewContent = function(container, new_content) {
container.fadeOut(1000, function(){
$(this).empty().append(new_content).fadeIn();
});
};
This ensures that the container isn't replaced until AFTER the animation is completed.
这确保在动画完成之前容器不会被替换。
