Hey all, I recently completed a re-design of my site (http:// specik.theatypical.net/) and I used quite a bit of jQuery animation and AJAXing. However, I'm wondering if anyone can give me a few pointers on how to make my code (below) more efficient. It feels a little bulky at the moment. Any help would be appreciated.
CODE: $(".toggle").bind('click', clickDo); function clickUndo(e) { var togLink = $(this).attr("rel"); var togText = $(this).attr("title"); var clicker = $(this); $(togLink).stop().fadeOut(function() { $("#header").animate({ width: '200px' }, 500, 'easeInBack', function() { $("#main").fadeTo(350, 1); }); }); $("#nav ul li").not($(this).parent()).animate({ left: '0px' }, 500, 'easeOutExpo'); $(clicker).stop().html(togText) .removeClass("expanded") .animate({ paddingRight: '25px', color: '#bbb' }) .unbind('click') .bind('click', clickDo); } function clickDo(e) { var togLink = $(this).attr("rel"); var togText = $(this).attr("title"); var clicked = $(this); $("#main").stop().fadeTo('fast', 0.35, function() { $(clicked).html(''+ togText +' <img src="img/loading.gif" class="load" />'); var dataString = 'page='+ togText +''; $.ajax({ type: "POST", url: "/bin/", data: dataString, success: function(html) { $(clicked).html(togText); $(togLink).html(html); $("#header").animate({ width: '835px' }, 500, 'easeOutExpo', function() { $(togLink).fadeIn(); }); $("#nav ul li").not($(clicked).parent()).stop().animate({ left: '-850px' }, 500, 'easeOutExpo'); $(clicked).html('Close <img src="img/ico_close.png" class="ico" />') .addClass("expanded") .animate({ paddingRight: '75px', color: '#fff' }) .unbind('click') .bind('click', clickUndo); }, error: function() { alert('something broke'); } }); }); }