Загрузка In и Animate содержимого

Question

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

Позвольте мне быть более точным: у меня есть div с идентификатором 'contact': <div id="contact">content</div> Код jquery загружает содержимое внутри этого div, когда я нажимаю ссылку с идентификатором 'ajax_contact': <a href="#" id="ajax_contact">link</a>.

Код работает отлично. Однако я хочу, чтобы #contact был скрыт при загрузке сайта, то есть состояние по умолчанию должно быть невидимым. Только когда пользователь щелкнет ссылку #ajax_contact, div должен появиться.

Пожалуйста, посмотрите на код jquery:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#ajax_contact').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #contact';
            $('#contact').load(toLoad)
        }
    });

    $('#ajax_contact').click(function(){

        var toLoad = $(this).attr('href')+' #contact';
        $('#contact').hide('fast',loadContent);
        $('#load').remove();
        $('body').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#contact').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#contact').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

Я не уверен, должен ли я что-то менять внутри HTML, но я верю, что ключ находится внутри jquery-кода. Я также попытался дать #contact стиль CSS visible: none, но это зацикливается и делает невозможным загрузку #contact в jquery.

Надеюсь, я хорошо объяснил; заранее большое спасибо.
Chris

Answer 1

CSS:

#contact { display: none; }

JQuery:

$("#contact").hide();

Я бы предложил:

<a id="contact" class="load">Load contacts</a>
<div id="content_contact" class="load"></div>

с CSS:

div.load { display: none; }

и

$("a.load").click(function() {
  $("#load_" + this.id).load("...", function() {
    $(this).show();
  });
  return false;
});

Редактировать: Ваша главная проблема - способ передачи обратных вызовов. Вместо:

$("#contact").load(toLoad, '', showNewContent());

сделать:

$("#contact").load(toLoad, '', showNewContent);

Первая версия передает возвращаемое значение в load(). Вторая проходит саму функцию .

Редактировать 2: для переключения на отображение:

$("a.load").click(function() {
  var dest = $("#load_" + this.id);
  if (dest.hasClass("loading")) {
    // do nothing if already loading
  } else if (dest.is(":visible")) {
    dest.hide();
  } else if (dest.is(":empty")) {
    dest.addClass("loading").load("...", function() {
      $(this).removeClass("loading").show();
    });
  } else {
    dest.show();
  }
  return false;
});

Добавлен класс «загрузки» для остановки нескольких вызовов load(). Класс удаляется после загрузки. Контент загружается только один раз, проверяя, пуст ли целевой раздел. Вы можете изменить это, если хотите, чтобы он загружался каждый раз, когда скрыт. Это зависит от того, что вы загружаете.