Uncaught TypeError with fadeIn in jQuery 1.9

Question

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 t

Answer 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

Answer 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