Question

我很难理解为什么我会得到我所看到的行为。我有一段代码，旨在淡化一个容器，替换内容，然后在完成后再将其淡入淡出。

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

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


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

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

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

知道为什么会这样吗？

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

Answer 1

问题是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();
});

当淡入淡出操作完成时触发该功能，因此排空和追加被延迟，直到元素被隐藏。

Answer 2

您需要使用回调函数来获得您正在寻找的效果。

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

这确保在动画完成后才更换容器。

jquery：fadeOut（）。empty（）。append（...）。fadeIn（）仅在第一次不能正常工作

2 个答案: