Динамически вставленный / загруженный контент Jquery не будет плавно исчезать

Question

У меня есть кусок Jquery, который сначала динамически вставляет div -

var contact_popup = '<div id="contact-popup" style="display: none; z-index:200; width: 400px; height: 400px;"></div>';
$('body').append(contact_popup);

А затем извлекает некоторый контент с другой страницы и вставляет его в div -

$('#contact-popup').load("contact/index.html #contact-content");

И затем исчезает, когда вы нажимаете ссылку на странице -

contact_item.click(function(){
    $('#contact-popup').fadeToggle(500);
    event.preventDefault();
}); 

Проблема в том, что всплывающее окно не исчезает, оно появляется только после небольшой задержки. Независимо от того, как долго вы находитесь на странице и нажимаете на ссылку, она все равно не исчезнет.

Что я делаю неправильно?? Спасибо!

Answer 1

Я нашел решение.

Ключом является не выполнение анимации в оболочке, в которую вы загружаете контент, а в оболочке, которая загружается с внешней страницы.

Поэтому я создаю оболочку, стилизую ее и добавляю к телу:

var overlay_wrapper = '<div id="content-wrapper"></div>';
$('#content-wrapper').css({
    position: 'fixed',
    left: '0',
    top: '0',
    width: '100%',
    height: '100%', 
    zIndex: '4'
});
$('body').append(overlay_wrapper);

Затем я загружаю содержимое в эту оболочку по щелчку и постепенно добавляю div, загружаемый с другой страницы в методе.load.

contact_item.on('click', function(event) {
    event.preventDefault();
    $('#content-wrapper').load("/tinite/contact/index.html #contact-content", function() { 
        $('#contact-content').hide().fadeIn(1000);
    });
    history.pushState(null, null, 'contact');
}); 

(Спасибо Тамилу Сельвану за указание на то, что мне нужно определить событие). Я также добавляю "контакт" к текущему URL с history.pushState,

Я не совсем уверен, почему исчезает этот другой div, но он делает переход красивым и плавным. Надеюсь, что это может помочь кому-то еще.

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