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

【问题标题】：Jquery Dynamically Inserted/Loaded Content Won't Fade In SmoothlyJquery 动态插入/加载的内容不会平滑淡入
【发布时间】：2014-09-25 02:07:20
【问题描述】：

我有一段 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();
});

问题是弹出窗口没有淡入，它只是在稍微延迟后出现。无论您在页面上停留多长时间并单击该链接，它仍然不会淡入。

我做错了什么？？谢谢！

【问题讨论】：

您的.click 活动中的contact_item 是什么？
event 在这里是undefined。使用contact_item.click(function(event){
您需要事件委托。在父对象上应用事件，例如 '$('parent').on('click', contact_item, function(){});'
contact_item 是菜单中要单击的项目，将触发弹出窗口。尝试事件委托，对我来说似乎以类似的方式行事。

标签： jquery animation fade jquery-load

【解决方案1】：

我找到了解决办法。

他们的关键是不是在您将内容加载到的包装器上执行动画，而是包装器是存在 em> 从外部页面加载。

所以我创建了一个包装器，为其设置样式并将其附加到正文：

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 指出我需要定义事件）。我还使用 history.pushState 将“联系人”添加到当前 URL。

我不完全确定为什么淡化这个其他 div 有效，但它使过渡变得漂亮和平滑。希望这对其他人有帮助。

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

【讨论】：

感谢伙计，这对我们有很大帮助，即使是 6 年后 :)