Загрузить и оживить содержимое

Question

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

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

Код работает отлично. Тем не менее, я хочу, чтобы #contact был HIDDEN при загрузке сайта, т. Е. Состояние по умолчанию должно быть невидимым. Только когда пользователь нажимает ссылку #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 видимого: none, но это петли и делает jquery невозможным загрузить #contact in.

Надеюсь, я хорошо себя зарекомендовал; заранее большое спасибо.
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; 
}); 

Edit: ваша основная проблема является способом вы передаете функции обратного вызова. Вместо того, чтобы:

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

сделать:

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

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

Edit 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() вызовов. Класс удаляется после загрузки. Содержимое загружается только один раз, проверяя, является ли целевой div пустым. Вы можете изменить это, если хотите, чтобы он загружался каждый раз при его скрытии. Это зависит от того, что вы загружаете.