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 
+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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');
                                          }
                                        });
                        });
        }

Reply via email to