javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作-6ren

javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作

转载作者：数据小太阳更新时间：2023-10-29 03:58:50

26

4

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

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

26

4

0

文章推荐： javascript - JQuery:如何在网站中运行背景音乐？

文章推荐： javascript - Sammy.js 中的全包或错误路由

文章推荐： javascript如何在一个对象中找到 child 的数量

文章推荐： javascript - 根据纬度和经度获取邮政编码？

image - pict 中的 hb-append vs hbl-append 和 ht-append vs htl-append
Racket 的 pict , 有几个 combinators for combining other pictures .这些文档包含一个很好的表格，说明其 *-append 组合器的工作方式: 这
javascript - Append within Append, Iframe within Append in Jquery
我看过 Insert content into iFrame和他们的 fiddle http://jsfiddle.net/8VP4y/3/提出以下我遇到问题的代码。我已经为下面的问题创建了一个 j
java - 为什么 StringBuilder 链接模式 sb.append(x).append(y) 比常规 sb.append(x) 快； sb.append(y)?
我有一个显示非常奇怪结果的微基准: @BenchmarkMode(Mode.Throughput) @Fork(1) @State(Scope.Thread) @Warmup(iterations =
java - 使用 .append(string1 + string 2) 与 .append(string1).append(string2)
我想知道是否有人可以回答我使用 StringBuilder 对象在 java 中执行这些语句中的哪一个会更好: 使用 .append(string1 + string 2) 对比 .append(st
append - 如何在Java 8中 append 两个Streams？
假设我有两个相同类型的流。是否可以将一个流 append 到另一个流而无需事先将它们转换为列表？例子: Stream ms = ...; Stream ns = ...; return ms.app
jQuery 在 append 元素内 append
我有以下有效的 jQuery 代码，但它让我思考是否可以对正在 append 的内容执行 append 操作，而无需指定我想要 append 的内容。 append().append() 并没有达到目
javascript - 如何删除 .append() 然后添加 .append()
这是为了显示诊断页面的检查。我有一个 .append(not_ok) 但当 swf 文件加载 100% 时，我想删除 not_ok 附加，然后添加一个 .append(ok)。 function ca
python - Numpy append 和普通 append
x = [[1,2],[2,3],[10,1],[10,10]] def duplicatingRows(x, l): severity = x[l][1] if severity =
python - append 到列表仅 append 第一项
我有一个列表，我正在尝试将数据注入(inject)其中。列表如下所示 data2 = ['TECH2_HELP', 'TECH2_1507', 'TECH2_1189', 'TECH2_4081',
jquery - 换行分离 append 按顺序不 append
为了有效地进行一些 DOM 操作，我分离了一个元素。在这个过程中，我遇到了一个有趣的情况: var $holder = $("#d"); var $wrapper = $("").css("borde
javascript - .append() 将图像 append 到过渡非常慢
我遇到了图片在移动设备上加载速度不够快的问题。我的元素有一个图像和一个按钮。单击该按钮时，图像向下滑动，另一幅图像从顶部滑动以取代它。这是代码 html CSS .moveF
python - append to a sublist append 到每个子列表
我正在编写一个包含 10 个遗愿 list 的简单哈希表。使用内置的 hash() 计算索引，然后对表大小取模。但是，当我尝试将该对象 append 到该索引处的存储桶列表时，它会 append 到每
append - LISP 列表不 append 和打印两次
我是 LISP 的新手，我正在尝试处理类的 cond 语句。目前，我正在尝试检查传递的值是否为列表，如果是，则将字母 d append 到列表中。这是我的代码: (defun test(L) (li
javascript - jQuery Append 不 append 任何内容
我正在使用 Jquery 将数据 append 到 div。但是，append 语句之后页面上没有显示任何内容。我尝试使用 $(window).load 来确保页面已加载，但这仍然不起作用。 HTM
javascript - 将相同的元素 append 到两个下拉列表会导致仅 append 最后一个
我有以下代码； function SetupDropdowns() { var PrevType; dropdown1 = document.getElemen
append - 创建一个数组并在 smarty 模板中向其 append 值
我想在 smarty 中创建一个数组并在其中执行 append 功能!就像我在 smarty 模板中声明一个变量(如 {assign var=sizearr value=''} )然后我想在循环中向其
jquery - 嵌套jquery的.append()、.each()、append()并保留第一个 "this"引用
请考虑以下代码片段: var ul = $(".list_b").find("li").remove().end(); $.each(Sites, functi
java - 从一个 appender 而不是另一个 appender 过滤记录器
我的日志记录配置中有两个 appenders。其中之一在 ERROR 事件上发送电子邮件。一个类，我无法控制，垃圾邮件 ERROR 消息。所以我仍然想要那些消息，但不是在两个 appenders 中
Android edittext append 和 remove append
我正在尝试制作 editText，我要在其中插入一些文本。在每三个字符之后，我想插入破折号。例子: 类型:123 结果:123- 现在当光标在破折号后面并且你按下删除键时，我想删除破折号和破折号
javascript - Jquery append() append 内容，但由于某种原因它被自动删除？
当我尝试 append 简单的“hello”时，它会被 append ，但很快就会自动删除。仅当我在下面给出的表单中使用它时，才会出现此问题，如果删除该表单，则不会出现问题，并且 hello 会正确

首页

博学

6Ren·AI

商城

javascript - jquery: fadeOut().empty().append(...).fadeIn() 只有第一次不能正常工作