Assign a bunch of animations to a variable in jquery?
<p>I'm fairly new to jQuery so that's why I ask:</p>

<p>I have 3 conditional animations operating on three divs:</p>

<pre><code>var viewport = $(window).width();
if ( viewport &lt; 1400 ) { 
     $("#panel").animate({marginLeft:"-175px"}, 500 );
     $("#colleft").animate({width:"0px", opacity:0}, 400 );
     $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
     $("#colright").animate({marginLeft:"50px"}, 500);
}else{
     $("#colright").fadeIn('slow').animate({marginLeft:"200px"}, 200);
     $("#panel").fadeIn('slow').animate({marginLeft:"0px"}, 400 );
     $("#colleft").fadeIn('slow').animate({width:"190px", opacity:1}, 400 );
     $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
}
</code></pre>

<p>As you can see, this is performing the animations based on viewport.</p>

<p>I have to repeat these conditionals on <code>$(window).resize(function() {</code> and <code>$("#hidePanel").click(function(e){</code>. </p>

<p>Do I have to repeat the code or can I assign them to a variable?</p>

<p><strong>EDIT</strong></p>

<p>The following function fails to work in the conditional.</p>

<pre><code>function collapseMenu(){
    $("#panel").animate({marginLeft:"-175px"}, 500 );
    $("#colleft").animate({width:"0px", opacity:0}, 400 );
    $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);
    $("#colright").animate({marginLeft:"50px"}, 500);
}

if ( viewport &lt; 1400 ) { 
     collapseMenu();
}
</code></pre>
