Javascript jquery:fadeOut（）.empty（）.append（…）.fadeIn（）不'；I don’我第一次就不能正常工作_Javascript_Jquery_Jquery Ui

Javascript jquery:fadeOut（）.empty（）.append（…）.fadeIn（）不'；I don’我第一次就不能正常工作

javascript jquery jquery-ui

Javascript jquery:fadeOut（）.empty（）.append（…）.fadeIn（）不'；I don’我第一次就不能正常工作,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我很难理解为什么我会有这样的行为。我有一段代码，旨在淡出一个容器，替换内容，然后在完成后再次淡入我正在使用jQuery，因此代码如下所示： var transitionToNewContent = function(container, new_content) { container.fadeOut().delay(1000).empty().append(new_content).fadeIn(); }; transitionToNewContent($('#id'), "&l

我很难理解为什么我会有这样的行为。我有一段代码，旨在淡出一个容器，替换内容，然后在完成后再次淡入

我正在使用jQuery，因此代码如下所示：

var transitionToNewContent = function(container, new_content) {
    container.fadeOut().delay(1000).empty().append(new_content).fadeIn();
};


transitionToNewContent($('#id'), "<p>magic</p>");

var transitiononnewcontent=函数（容器，新内容）{
container.fadeOut（）.delay（1000.empty（）.append（new_content.fadeIn（））；
};
TransitionNewContent（$（'#id'），“magic”；

第一次单击激活此转换的链接时，内容立即被替换，然后淡出，然后再次淡入

每次点击链接后，我都会看到正确的行为：淡出，然后淡出新内容

知道为什么会这样吗

我附上了一个完整的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>


#主集装箱{
宽度：800px；
左边距：自动；
右边距：自动；
边缘底部：3em；
边际上限：0；
身高：100%；
位置：相对位置；
顶部：0px；
底部：0px；
}
#装载{
浮动：对；
位置：相对位置；
顶部：10px；
左：10px；
z指数：1；
}
#边栏{
浮动：左；
宽度：240px；
边框：0786001px虚线；
位置：相对位置；
顶部：10px；
左：-250px；
右边距：20px；
背景:#中交;；
z指数：1；
填充：10px；
字号：0.65em；
显示：无；
}
#主要内容{
z指数：0；
位置：绝对位置；
顶部：0px；
左：5px；
宽度：100%；
身高：100%；
浮动：对；
背景：白色；
填充顶部：0；
垫底：3em；
左侧填充：20px；
右边框：1px虚线#078600；
左边框：1px虚线#078600；
边框顶部：3件纯白；
}
侧边栏一些文本
&nbps；
标题
标题一些测试文本
var include=函数（src）{
文件。写（“”）；
};
包括（”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js");
包括（”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js");
var bootStrapSites=函数（）{
var侧栏=$（“#侧栏”）；
delay（1000.fadeIn（）；
加载站点列表（侧栏）；
};
var transitiononnewcontent=函数（容器，新内容）{
container.fadeOut（）.delay（1000.empty（）.append（new_content.fadeIn（））；
};
var editSite=功能（站点）{
TransitionNewContent（$（“#page_content”），“这就是神奇将发生的地方””；
};
var loadSiteList=函数（容器）{
//$.getJSON（“/sites/list.json”），函数（数据）{
var data=$.parseJSON（'[{“id”：“1”，“name”：“cool name”}]'）；
容器。空的（容器）；
集装箱。附加（“新标题”）；
container.append（“”；
var sitesList=$（“#sitesList”）；
$。每个（数据、功能（idx、站点）{
变量id='show_site_id_'+site.\u id；
sitesList.append（“”）；
$（'#'+id）。单击（函数（）{
编辑站点（站点）；
});
});
//  });
};
$（文档）.ready（函数（）{
bootStrapSites（）；
});

您需要使用回调函数来获得想要的效果

var transitionToNewContent = function(container, new_content) {
    container.fadeOut(1000, function(){
         $(this).empty().append(new_content).fadeIn();
    });
};

这确保了在动画完成之前容器不会被替换。

问题在于jQuery中有两种不同类型的函数——立即生效的函数和向效果队列添加效果的函数

让我们看看您的代码：

container.fadeOut().delay(1000).empty().append(new_content).fadeIn();

```
fadeOut
```
向队列添加淡入淡出操作
```
delay
```
向队列添加延迟
```
empty
```
立即清空元素
```
append
```
立即追加内容
```
fadeIn
```
向队列添加淡入淡出操作

向队列中添加项的函数会立即返回——它们不会等到完成后才生效。这意味着所有函数（几乎）在同一时间被调用——它们不会等待动画函数完成

您需要使用callback参数进行淡出：

container.fadeOut(1000, function(){
    container.empty().append(new_content).fadeIn();
});

该函数在淡入淡出操作完成时触发，因此清空和追加会延迟到元素隐藏为止。

这是可行的，有没有办法确保淡出（1000，…）的幻数（1000）与淡出（）的默认值相同？我相信所有动画的默认值都是“快”=200，因此，如果要使用默认值，可以将字符串“fast”替换为1000。请参阅：或者您可以完全忽略此参数：

container.fadeOut（fn）

使用默认速度（实际上是400ms）。很抱歉在这么长时间后提出此问题，但对于那些来到这里的人来说，.promise（）.done是另一种使用较少且更容易理解的代码的方法。只需调用要操作的对象的.promise（）.done（函数（）{}），并将要运行的代码放入函数中。它只会在该对象的队列上的所有效果运行后运行。否，只是一个虚构的id值和该id号上的有效选择器。您有dollar，后跟dot，后跟open paren