Slow jQuery fadeIn and fadeOut

I'm using jQuery fade effects for my "random fact" section near the top of the page on www.funfactz.com. I've tried in Chrome, IE, and Firefox. Does it happen for everyone else?

It used to be smooth and work fine, but now it seems to be lagging so much that it appears as a delayed show/hide without any animation.

What can cause this? I'm not sure what change to the website may have caused it as I've only just noticed it and have made many changes over the last 2 weeks.

Here's the barebones code for the random feature:

    $('#randomfact').load('res/js/ajax/randomfact.php', function() {
        $('#randomfact').fadeIn('fast')
    });
        $('.pushme').click(function() {
            if(!loading) {
                loading = true
                $('#randomfact').fadeOut(500, function() { 
                    $('#randomfact').load('res/js/ajax/randomfact.php', function() {
                        $('#randomfact').fadeIn(500);
                        loading=false;
                    });
                });
            }
        });

Code (markup):

 

jQuery is fat bloated slow bullshit, and to be frank fadeIn/fadeOut isn't even anything scripting should be handling anymore apart from a simple class-swap. OF COURSE it's choppy. (always has been here) -- much less sucking any battery powered devices dry.

Of course that you're using it for some goofy ajax-tard bull that sucks down WAY too much whitespace on the page isn't helping. I'd just swing an axe at that whole section of the page... though given the absolute train wreck of bad practices like static CSS in the markup, pointless title attributes, absolute URL's, that stupid malfing mm_swap javascript asshattery from the steaming pile of manure known as Dreamweaver, endless pointless DIV and ID's for nothing, endless pointless clearing DIV like it's still 2001, inaccessible fixed width layout... you've got a laundry list of how not to build a website, so a choppy animation is the LEAST of your worries.

... as evidenced by the 30 second page-load here (on a 25mbps connect), coming from the ridiculous constant reloading of some sort of script-tard nonsense from google... over and over and over again the same filename with different results? With all those pointless scripts for nothing it's hardly a shock some jQuery crap is being slowed... Did you add any new scripts that could be conflicting or hogging the CPU (more) lately?

Of course, it's hardly a shock to see it wasting 93.5k of markup to deliver what for all intents and purposes is 3.3k of plaintext and three content images -- easily ten times as much code as should have been necessary for such a simple site, particularly one who's design reeks of "accessibility, what's that?"

Animation issues? Just looks like an indication of deeper rooted issues with the site and flawed site-building methodologies.

 

Skimming through the beautiful demonstration of "asshattery" mannerism there... to answer your question, I haven't added any new scripts that I can remember.

The Fade effects of jQuery are not usually choppy (as you claim), at least not for me, and I've never had problems with it until now. The scripts that you're referring to are probably Google PageSpeed Service that I'm currently harnessing (which is probably why you're perceiving the page as such a "train wreck" because of the way that Google modifies the code), and probably the async AdSense code. The site appears OK when I check the PageSpeed through Google's tool.

I care not to answer the rest of your post, although I did take a peak at the website in your signature and, well, it is of a lesser designer than you depict in your condescending response.

Now, to the original purpose of the thread.

I've tried disabling all Google PageSpeed Service rewriters, AdSense code, and removing the share icons to test to see if any of those were interfering, but negative. I'm suspecting some sort of CSS somewhere that could lag the jQuery animation is interfering with it.


Edit: Fixed the problem by switching to the following code and using CSS3 transitions:

$('#randomfact').css('opacity','0');
                $('#randomfact').load('res/js/ajax/randomfact.php', function() {
                    $('#randomfact').css('opacity','1');
                    loading=false;
                });

Code (markup):

This is just a different method of doing it - it doesn't really answer what was causing the jQuery fades to lag.

 

I agree with deathshadow.
you should look at css transitions..
http://css-tricks.com/almanac/properties/t/transition/