jQuery 1.9中使用fadeIn出现Uncaught TypeError错误

Question

这里有个问题，不幸的是我们必须支持IE8。
所以我不得不从最新的jQuery 2.0+改回jQuery 1.9。现在我们使用很多jQuery来加载仪表板的不同部分，我们用fadeOut淡出之前的屏幕，并用fadeIn显示新屏幕。我认为我已经通过在此处找到的解决方案（prepend html）和（ajax HTML）解决了所有这些问题。然而，仍然存在一个相同错误信息的问题：

Uncaught TypeError: Cannot set property 'cur' of undefined 

我将源代码的问题定位在loadResource函数上，该函数用于切换内容。

基本上，如果我从下面的函数中注释掉这一行：

$content.fadeIn('fast');

将

替换为

。

$content.show();

问题已经解决，我们不再遇到“cur”错误。然而，我们失去了淡入效果。

您将如何解决这个问题，在保持$content上的fadeIn效果的同时解决jQuery 1.9中的Uncaught TypeError？

var loadResource = function(url, params, callback) {
WHOAT.networking.getToServerWithAjax(url, params, function (response) {
        var $content = $($.parseHTML(response.trim()));
        var $container = $('#dashboard-display');
        var $content_to_hide = $container.children();

        $.when($content_to_hide.fadeOut('fast')).then(function () {
            $content.hide();
            $container.append($content);

            //$content.fadeIn('fast'); // <- buggy in 1.9.1
            $content.show(); // <- works, but no fadeIn

            $content_to_hide.remove();

            if(callback) {
                callback();
            }
        });
    });

// CSS updates...
};

- Leon Gaban

---

顺便提一下，切换到jQuery 1.8也解决了这个问题:/该死的IE8！ - Leon Gaban

在这个回答中找到了解决方法和解释 https://dev59.com/V2_Xa4cB1Zd3GeqPzlB5 - avatarez

Answer 1

奇怪！

好吧，也许我是个特例，在尝试了jQuery和我们的模板之后。我把问题缩小到了这个特定的模板（Mako / Python）：

##conditional to determine with the template should inherit from the base page
##it shouldn't inherit from the base page is it is being inserted into the page using ajax
<%!
    def inherit(context):
        if context.get('isPage'):
            return "base_dashboard.mak"
        else:
            return None
%>
<%inherit file="${inherit(context)}"/>

<div id="dashboard-profile-container">
    <%include file="widgets/profile_widget.mak" />
</div>

<div class="spacer-div"></div>

我所要做的就是移除空格分隔符：

<div class="spacer-div"></div>

基本上，上面的模板正在加载导致问题的页面的HTML。我三次检查了HTML，一切都很好，但由于某种原因，这个空的间隔div会导致“未定义”错误。

也许由于额外的HTML节点，当jQuery尝试渲染页面时会出现问题。

- Leon Gaban

---

我猜测$content包含文本节点，并且您正在尝试对它们调用.fadeIn()。（对编辑感到抱歉） - Dave Methvin

Answer 2

$content.fadeIn('fast'); 通常在淡出后删除对象，而$content.show();则不会。

我建议您使用$content.animate({opacity: 1});

探索animate()以获取更多选项。

编辑：抱歉，透明度设置为0（fadeOut();），现在是正确的：1（fadeIn();）

编辑2：

可能相反的情况正在发生，您正在尝试使用尚未加载的对象。

尝试这个：
$content.css({opacity: 0.1, display: block}).animate({opacity: 1});
或
$content.css({opacity: 0.1}).show().animate({opacity: 1});

它以低透明度加载对象，然后使其完全不透明

- JDuarteDJ

---

谢谢，我刚试了一下，但仍然出现“cur”错误...我开始相信问题可能存在于我发布的loadResource函数之外的某个地方，正在努力缩小范围。 - Leon Gaban

通常情况下，如果您按下错误旁边的灰色箭头，您应该能够看到脚本调用的所有内容，这些内容都是在您寻找的函数之前执行的！ - JDuarteDJ

动画不会删除任何内容。jQuery中命名的动画函数（如fadeIn，fadeOut）都使用相同的基本动画类，并且可以动画化不同的属性。 - Josiah Ruddell

我很确定以前发生过这种情况。无论是hide()还是fadeOut()都会产生这种效果。 - JDuarteDJ