3

这就是问题所在，不幸的是我们必须支持 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”错误。但是我们失去了淡入淡出效果。

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

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...
};
4

2 回答 2

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 导致了未定义的错误

在此处输入图像描述

也许由于某种原因，当 jQuery 尝试呈现页面时，额外的 HTML 节点导致了问题

于 2013-07-30T16:19:46.437 回答
-1

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

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

于 2013-07-30T15:10:15.640 回答