Вопросы Теги

jquery: fadeOut (). empty (). append (…) .fadeIn () не работает должным образом только в первый раз

Я изо всех сил пытаюсь понять, почему у меня такое поведение. У меня есть фрагмент кода, который нацелен на то, чтобы убрать контейнер, заменить его содержимое, а затем снова включить его, когда это будет сделано.

Я использую jQuery, поэтому код выглядит так: 

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


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

Первый раз, когда щелкает ссылка, которая активирует этот переход, содержимое заменяется мгновенно, затем происходит постепенное исчезновение, затем оно снова исчезает.

Каждый раз после этого, когда щелкают ссылку, я вижу правильное поведение: затемнение, затем fadein с новым содержанием.

Есть идеи, почему это происходит?

Я приложил полный 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>
8
задан Pieter Breed 3 April 2011 в 01:17
поделиться