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

Question

我很難理解為什么我會得到我所看到的行為。 我有一段代碼，旨在淡出一個容器，替換內容，然后在完成時再次淡入。

我正在使用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>

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 個解決方案

解決方案1
30 已采納 2011-04-02 21:29:13

解決方案2
2 2011-04-02 21:27:24

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

問題描述

2 個解決方案

解決方案1 30 已采納 2011-04-02 21:29:13

解決方案2 2 2011-04-02 21:27:24

解決方案1
30 已采納 2011-04-02 21:29:13

解決方案2
2 2011-04-02 21:27:24