我很难理解为什么会出现我所看到的行为。我有一段代码旨在淡出容器，替换内容，然后在完成后再次淡入。
我正在使用 jQuery，所以代码如下所示:
var transitionToNewContent = function(container, new_content) {
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};
transitionToNewContent($('#id'), "<p>magic</p>");
第一次单击激活此过渡的链接时，内容会立即被替换，然后淡出，然后再次淡入。
之后每次单击链接时，我都会看到正确的行为:淡出，然后淡入新内容。
知道为什么会这样吗？
我附上了一个显示行为的完整 html 文件:
我是 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>
最佳答案
问题在于 jQuery 中有两种不同类型的函数——立即生效的函数和将效果添加到效果队列的函数。
让我们看一下您的代码:
container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
fadeOut向队列添加淡入淡出操作delay向队列添加延迟empty立即清空元素append立即追加内容fadeIn向队列添加淡入淡出操作
将项目添加到队列的函数会立即返回——它们不会等到完成才生效。这意味着所有函数都(几乎)同时被调用——它们不会等待动画函数完成。
您需要使用 fadeOut 的回调参数来代替:
container.fadeOut(1000, function(){
container.empty().append(new_content).fadeIn();
});
当淡入淡出操作完成时触发该函数，因此清空和追加会延迟到元素被隐藏。
关于javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5525960/