Uncaught TypeError with fadeIn in jQuery 1.9

问题:

Here is the problem, unfortunately we have to support IE8.
So I had to change from using the latest jQuery 2.0+ back to jQuery 1.9.

Now we use a lot of jQuery to load up different sections of our dashboard, we fadeOut previous screens and fadeIn new screens. I thought I had fixed all of these problems with solutions I found here(prepend html) and here(ajax HTML).

However still having one more problem with the same error message below:

Error:

Uncaught TypeError: Cannot set property 'cur' of undefined 

I've narrowed down the source to the loadResource function, which is used to switch out content.

Basically if I comment out this line from the function below:

$content.fadeIn('fast');

And replace it with

$content.show();

The problem is solved and we no longer get that 'cur' error. However we lose our fadeIn effect.

How would you approach this problem that solves the Uncaught TypeError in jQuery 1.9 while keeping our fadeIn effect on $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...
};

回答1:

STRANGE!

Ok so maybe I'm a unique case, after fiddling around and going through jQuery and our templates. I narrowed it down to this particular template (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>

All I had to do was remove the space-div:

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

Basically the template above was loading the HTML for the page that was causing the problem. I triple checked the HTML, everything was good there, but for some reason this empty spacer div was causing that Undefined error

Maybe for some reason that extra HTML node was causing an issue when jQuery tried to render the page

回答2:

$content.fadeIn('fast'); typically removes the object after it fades out while $content.show(); does not.

I would recommend you use $content.animate({opacity: 1});

Explore animate() for more options.

EDIT: sorry opacity was set to 0 (fadeOut();), it's correct now: 1 (fadeIn();)

EDIT2:

It might be that the opposite is happening you are trying to use an object that hasn't been loaded yet.

try this:
$content.css({opacity: 0.1, display: block}).animate({opacity: 1});
or
$content.css({opacity: 0.1}).show().animate({opacity: 1});

it loads the object with little opacity and then makes it to full opacity