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");

然后当您点击页面上的链接时淡出该div -

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);

然后，我在点击时将内容加载到此包装器中，并淡入从.load方法中的另一页加载的div。

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');
});

（感谢Tamil Selvan指出我需要定义事件）。我还添加了联系人＆＃39;到history.pushState的当前网址。

我完全不确定为什么淡化这个其他div工作，但它使转换变得顺畅和顺利。希望这可以帮助别人。

编辑 - 这只会淡化其中的内容。为了隐藏内容，我会在其中添加一个if语句来检查联系人内容是否可见，并根据此更改单击的功能。

Jquery动态插入/加载的内容不会平滑淡入淡出

1 个答案: