I'm running the below script on a WordPress powered site. It's very heavy on the animations and uses AJAX to fetch posts and load them into a div.Three things I wanted to address:Cleaning up the code so that it runs faster/betterSometimes the AJAX request doesn't get the next post and either keeps showing the same post, or briefly shows the next post then disappearsThe animation bubbles() animates in some divs from off screen, and is closed with the closeAggregator() function. Sometimes the closeAggregator() function doesn't trigger the animations to slide the divs out of view, and instead just fades out. Which is problematic because the next time the bubbles() function is triggered, the divs are already in view, thus: no pretty animation.I imagine a lot of this is due to the lack of cleanliness/organization in the script. Just hoping someone can help clean this bit up!//resize feeling font-size if word count is too highfunction resizeFeeling(){    var $quote = $(.feeling);    var $numWords = $quote.text().split( ).length;        if (($numWords >= 12) && ($numWords < 40)) {        $quote.find('h1').css({            'font-size' : '46px',            'line-height' : '48px'        });            $quote.find('h2').css({            'font-size' : '40px',            'line-height' : '50px'        });    }   };//binding for key navigationvar pressedKeys = {};var wtf = {    'keydown': function (e) {        if (pressedKeys[e.which])            return;            pressedKeys[e.which] = true;        var keyCode = e.keyCode || e.which,                key = {left: 37, right: 39, random: 83};        switch (keyCode) {            case key.left:                        if ($('#post-nav .post-next a').length != 0) {                            $('#keys .left-arrow').toggleClass('pressed');                            $('#post-nav .post-next a').click();                        } else { //if reach the beginning                            $('#keys .left-arrow').toggleClass('pressed');                            $('.boots').jrumble({rangeX: 5,rangeY: 0, rangeRot: 0, rumbleEvent: 'custom'});$('.boots').trigger('start_rumble');                        }                break;            case key.right:                if ($('#post-nav .post-previous a').length != 0) {                    $('#keys .right-arrow').toggleClass('pressed');                    $('#post-nav .post-previous a').click();                } else { //if reach the end                    $('#keys .right-arrow').toggleClass('pressed');                    $('.boots').jrumble({rangeX: 5,rangeY: 0, rangeRot: 0, rumbleEvent: 'custom'});$('.boots').trigger('start_rumble');                }                break;            //load a random feeling by pressing the 's' key (ie. shuffle)            case key.random:                $('#keys .shuffle').toggleClass('pressed');                randomizeFeelings();                break;        }    },    'keyup': function (e) {         delete pressedKeys[e.which];        var keyCode = e.keyCode || e.which,                key = {left: 37, right: 39, random: 83 };        switch (keyCode) {            case key.left:                $('#keys .left-arrow').toggleClass('pressed');                $('.boots').trigger('stop_rumble');                break;            case key.right:                $('#keys .right-arrow').toggleClass('pressed');                $('.boots').trigger('stop_rumble');                break;            case key.random:                $('#keys .shuffle').toggleClass('pressed');                break;        }    }};//load up the welcome modal with the appropriate welcome messagefunction welcome() {        //Get the time of day    var currentTime = new Date().getHours();    //late    if (0 <= currentTime&&currentTime < 5) {        $('#heavyBoots h2').append(Hello my restless insomniac,);    }    //morning    if (5 <= currentTime&&currentTime < 12) {        $('#heavyBoots h2').append(Yawnnnn; good morning baby,);    }    //afternoon    if (12 <= currentTime&&currentTime < 16) {        $('#heavyBoots h2').append(Whatcha doin' dear?,);    }    //evening    if (16 <= currentTime&&currentTime < 22) {        $('#heavyBoots h2').append(Hello there,);    }    //late    if (23 <= currentTime&&currentTime <= 24) {        $('#heavyBoots h2').append(Hey, isn't it your bedtime?);    }    //Get the Day    var day=new Date().getDay();    switch (day)    {    case 0: //Sunday      $('#heavyBoots p').append(It's a lazy Sunday.);      break;    case 1: //Monday      $('#heavyBoots h2').html(Fuck Mondays.);      break;    case 5: //Friday      $('#heavyBoots p').append(Also, it's Friday!);      break;    default: //Any other day      $('#heavyBoots h2').append();    }    //fade-in the background & then the welcome modal    $('#home-bg').fadeIn(500, function(){        $('#heavyBoots').animate({            bottom: '50%'        }, 500, 'easeInOutQuint');    });    //click to hide the welcome modal and load the first post (resize text if needed)       $('#heavyBoots a').live('click', function(){        $(this).parent().parent().animate({            bottom: '-150%'        }, 500, 'easeInOutQuint', function(){            $('#home-bg').fadeOut(200);        });        resizeFeeling();        $('#content').delay(1500).fadeIn(600);        $('.heavy h1').delay(1500).animate({                left: '0%'            },200, 'easeOutSine');            $('.heavy h2').delay(1500).animate({                right: '0%'            },200, 'easeOutSine', function() {                // fade-in bg if there            $('#custom-bg').fadeIn(500);            });        //slide-down date            setTimeout(function() {                $('#logo').delay(1000).animate({                    top: '20px'}, 300, 'easeInOutElastic', function(){                $('.heavy h3 span').animate({                top: '0px'            },200, 'easeOutSine', function() {                        // Animation complete.                        $('#keys').animate({bottom: '20px'},300, 'easeInOutElastic');            });        });        }, 1000);        //call first post, activate feelings & bind keys        $(document).bind(wtf);            cycleFeelings();    });};function relationshipAggregator() {    //Remove current feeling from the view & slide out the keyboard legend    $('.heavy h1').animate({        left: '-150%'        },200, 'easeInBack');    $('.heavy h2').animate({        right: '-150%'        },200, 'easeInBack');    $('#custom-bg').fadeOut(100);    $('#content').fadeOut(600, function(){        $('.heavy h3 span').animate({top: '-40px'});    });    $('#keys').animate({bottom: '-55px'},300, 'easeInOutElastic');    //remove key binding to prevent user from accidentally changing the current feeling    bubbles();    $(document).unbind(wtf);    //close the aggregator, bring back the feeling & rebind the keys};function closeAggregator() {    $('#aggregator-close').animate({            top: '-100px'        }, 500, 'easeInOutElastic', function() {            $('#bubble1').animate({                left: '-150%'            }, 1000, 'easeOutBack');            $('#bubble2').animate({                    top: '-150%'            }, 1000, 'easeOutBack');            $('#bubble3').animate({                bottom: '-150%'            }, 1000, 'easeOutBack');            $('#bubble4').animate({                bottom: '-150%'            }, 1000, 'easeOutBack');            $('#bubble5').animate({                right: '-150%'            }, 1000, 'easeOutBack');            $('#bubble6').animate({                top: '-150%'            }, 1000, 'easeOutBack');            $('#reddit').animate({                bottom: '-150%'            }, 1000, 'easeOutBack');        });     setTimeout( function() {        $('#aggregator').fadeOut(200);        $('.heavy h1').animate({            left: '0%'            },200, 'easeInBack');        $('.heavy h2').animate({            right: '0%'            },200, 'easeInBack');        $('#custom-bg').fadeIn(100);        $('#content').fadeIn(600, function(){            $('.heavy h3 span').animate({top: '0px'});        });        $('#keys').animate({bottom: '20px'},300, 'easeInOutElastic');    }, 800);    $(document).bind(wtf);};//NUMBERS & STUFFfunction relationshipCount() {    var visitTime = $('#visit_time').val();    var relationshipTime = $('#relationship_time').val();    var nextDate = new Date(visitTime+':00:00');    var totalTime = new Date(relationshipTime);    $(#visit).countdown({        date: nextDate, //Counting down to a date        offset: 1,        hoursOnly: true,        onChange: function(e,settings) {        },        onComplete: function( event ) {            $(this).html('Right now');        },        leadingZero: true    });    $(#relationship).countdown({        date: totalTime, //Counting up to a date        offset: 1,        htmlTemplate: %{o} %{d},        hoursOnly: false,        onChange: function(e,settings) {        },        onComplete: function( event ) {            $(this).html('this should never complete');        },        leadingZero: true,        direction: 'up'    });};function bubbles(){    $('#aggregator').fadeIn(200);        comicScroll();        $('#bubble1').animate({            left: '50%'        }, 1000, 'easeInBack');        $('#bubble2').animate({                top: '50%'        }, 1000, 'easeInBack');        $('#bubble3').animate({            bottom: '50%'        }, 1000, 'easeInBack');        $('#bubble4').animate({            bottom: '50%'        }, 1000, 'easeInBack');        $('#bubble5').animate({            right: '50%'        }, 1000, 'easeInBack');        $('#bubble6').animate({            top: '50%'        }, 1000, 'easeInBack', function() {            $('#aggregator-close').animate({                top: '70px'            }, 500, 'easeInOutElastic');        });        $('#reddit').animate({            bottom: '50%'        }, 1000, 'easeInBack');    relationshipCount();};//the feeling is requested and loaded via AJAXfunction cycleFeelings() {    //grab the next post link and replace default action with ajax load    $('#post-nav a').stop().live('click', function(e){        e.preventDefault();        //remove the current feeling from the view        $('.heavy h1').animate({            left: '-150%'            },200, 'easeInBack');            $('.heavy h2').animate({                right: '-150%'            },200, 'easeInBack');        var link = $(this).attr('href');        $('#custom-bg').fadeOut(100);        $('#content').fadeOut(600, loadContent);        //bring in the loading modal        $('#load').remove();        $('body').append('<div id=load><span><h4>Loading</h4><h5>feelings...</h5></span></div>').fadeIn(100);         $('#load').animate({            top: '50%'            }, 500, 'easeInOutElastic').fadeIn(400);         //load up the feeling div with the new feeling content         function loadContent() {              $('#content').load(link+' .heavy','',showNewContent())          }          //animate in the newly loaded feeling        function showNewContent() {              setTimeout(function() {$('#content').fadeIn(600,hideLoader());                resizeFeeling();                $('.heavy h1').animate({                left: '0%'                },200, 'easeOutSine');                $('.heavy h2').animate({                    right: '0%'                },200, 'easeOutSine', function() {                        // fade-in bg if there                        $('#custom-bg').fadeIn(500);                                            //slide-down date                        setTimeout(function() {                        $('.heavy h3 span').animate({                    top: '0px'                    },200, 'easeOutSine');                    }, 500);                        });             }, 1000);        }        //function to hide the loading modal        function hideLoader() {              $('#load').animate({                top: '-150%'            }, 200, 'easeInBack').fadeOut(200);          }          return false;    }).stop();};    //random feeling is requested and loaded via AJAX    //TODO: merge with cycleFeelings() to remove redundancy in ajax request function    function randomizeFeelings(){          //remove the current feeling from the view        $('.heavy h1').animate({            left: '-150%'            },200, 'easeInBack');            $('.heavy h2').animate({                right: '-150%'            },200, 'easeInBack');        var toLoad = /random-feeling/?cachebuster= + Math.floor(Math.random()*10001);          $('#custom-bg').fadeOut(100);        $('#content').fadeOut(600, loadContent);        //bring in the loading modal          $('#load').remove();         $('body').append('<div id=load><span><h4>Loading</h4><h5>feelings...</h5></span></div>').fadeIn(100);         $('#load').animate({            top: '50%'            }, 500, 'easeInOutElastic').fadeIn(400);        //load up the random feeling div with the new feeling content          function loadContent() {              $('#content').load(toLoad,'',showNewContent())          }        //animate in the newly loaded random feeling        function showNewContent() {              setTimeout(function() {$('#content').fadeIn(600,hideLoader());                 resizeFeeling();                $('.heavy h1').animate({                    left: '0%'                    },200, 'easeOutSine');                    $('.heavy h2').animate({                        right: '0%'                    },200, 'easeOutSine', function() {                        // Animation complete.                        $('#custom-bg').fadeIn(500);                        //slide-down date                        setTimeout(function() {                        $('.heavy h3 span').animate({                    top: '0px'                    },200, 'easeOutSine');                    }, 500);                    });            }, 1000);          }          //function to hide the loading modal        function hideLoader() {              $('#load').animate({                top: '-150%'            }, 200, 'easeInBack').fadeOut(200);          }          return false;    };//future option to have a physical button run the random feeling function$('.feelings').click(randomizeFeelings);//bind relationship aggregator to the click of the logo$('#logo a').click(relationshipAggregator);//close the aggregator$('#aggregator-close a').click(closeAggregator);/*  --------------------------        RAGE COMIC MODAL        --------------------------        TODO: add/remove the div so it doesn't have to be hard-coded in header*/$('#reddit a').click(rageComics);//bringing in the reddit rage comics modalfunction rageComics() {    //unbinding the key nav for the feelings    $('#ragebox').fadeIn(200);    //binding the new key nav for the comics    $(document).bind(wtf2);    //initializing the first rage comic from reddit    nextRage();};function closeRage() {        //reset the count so that the first rage comic is loaded on next opening of the reddit modal        i = -1;        //unbind the key nav for the comics        $(document).unbind(wtf2);        //fadeout the current rage comic so it's not shown on next opening of the reddit modal        $('.rage-wrap').fadeOut(400);        //fadout the reddit rage comic modal completely        $('#ragebox').fadeOut(200);        //rebind the key nav for the feelings    }//binding for rage comics key navigationvar pressedKeys2 = {};var wtf2 = {    'keydown': function (e) {        if (pressedKeys2[e.which])            return;            pressedKeys2[e.which] = true;        var keyCode = e.keyCode || e.which,                key = {left: 37, right: 39};        switch (keyCode) {            case key.left:                    prevRage();                break;            case key.right:                    nextRage();                break;        }    },    'keyup': function (e) {         delete pressedKeys2[e.which];        var keyCode = e.keyCode || e.which,                key = {left: 37, right: 39};        switch (keyCode) {            case key.left:                //stuff                break;            case key.right:                //stuff                break;        }    }};/*  --------------------------        REDDIT JSON REQUEST        --------------------------        TODO: get the image url even if url is to imgur page*///set the countvar i = -1;//parse the json datafunction rage(data) {    var rageURL = data['data']['children'][i]['data']['url']; //the url    var rageTitle = data['data']['children'][i]['data']['title']; //the title of the rage comic    //the error variable    var rageErr = '<div><h5>Whoops!</h5><h6>'+rageTitle+'</h6><a href='+rageURL+' target=_blank>try again in a new tab</a></div>';    //append the image to the modal window    $('#comic .rage-wrap').html('<img src='+rageURL+' />');    //if the image loads, fade it in    $('img').load(function() {         $('.rage-wrap').fadeIn(400); comicScroll();    });    //if the image fails to load, show the error message of the link & title    $('img').error(function() {         $('#comic').removeClass('comic-loader');        $('.rage-wrap').html(rageErr).fadeIn(400);    });};//JSON request of the next rage comicfunction nextRage() {    if (i>=-1) {        //increase the count by 1        i++;        //fadeout the current comic        $('.rage-wrap').fadeOut(400);        $('#comic').addClass('comic-loader');        $.ajax({          type: GET,          url: http://www.reddit.com/r/fffffffuuuuuuuuuuuu/.json,          dataType: jsonp,          jsonp: jsonp,          cache: true,          success: rage //run the data^      });    }};function prevRage() {    if (i>0) {        //decrease the count by 1        i--;        //fadeout the current comic        $('#comic').addClass('comic-loader');        $('.rage-wrap').fadeOut(400);        $.ajax({          type: GET,          url: http://www.reddit.com/r/fffffffuuuuuuuuuuuu/.json,          dataType: jsonp,          jsonp: jsonp,          cache: true,          success: rage //run the data^      });    }};//binding the previous rage comic button$('.prev-rage a').click(prevRage);//binding the next rage comic button$('.next-rage a').click(nextRage);//bind closing the modal to the close button$('#closerage').click(closeRage);/*  --------------------------        LOGO & LOVE HOVER STATES        --------------------------*/function hoverStates() {    //Main Logo    $('#logo').hover( function () {      $(this).stop().animate({opacity : 1}, 100);       }, function () {        $(this).stop().animate({opacity : .6}, 100);         });    //Love Icon (fill up)    $('#love a').hover( function () {        $(this).find('span').stop().animate({height:'0'},400, 'easeInSine');    }, function () {        $(this).find('span').stop().animate({height:'44px'},400, 'easeOutSine');    });    //Aggregator Close    $('#aggregator-close').hover( function () {      $(this).stop().animate({opacity : 1}, 100);       }, function () {        $(this).stop().animate({opacity : .6}, 100);         });};// usage: log('inside coolFunc', this, arguments);// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/window.log = function(){  log.history = log.history || [];   // store logs to an array for reference  log.history.push(arguments);  if(this.console) {    arguments.callee = arguments.callee.caller;    var newarr = [].slice.call(arguments);    (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));  }};// make it safe to use console.log always(function(b){function c(){}for(var d=assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn.split(,),a;a=d.pop();){b[a]=b[a]||c}})((function(){try{console.log();return window.console;}catch(err){return window.console={};}})());(function($) {    $.fn.prettynumber = function(options) {        var opts = $.extend({}, $.fn.prettynumber.defaults, options);        return this.each(function() {            $this = $(this);            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;            var str = $this.html();            $this.html($this.html().toString().replace(new RegExp((^\\d{+($this.html().toString().length%3||-1)+})(?=\\d{3})),$1+o.delimiter).replace(/(\d{3})(?=\d)/g,$1+o.delimiter));        });    };    $.fn.prettynumber.defaults = {        delimiter       : ','       };})(jQuery);
Cleaning up & better AJAX response
javascript;jquery;ajax