Question

I’m fairly new to jQuery so that’s why I ask:

I have 3 conditional animations operating on three divs:

var viewport = $(window).width();
if ( viewport < 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");
}

As you can see, this is performing the animations based on viewport.

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

Do I have to repeat the code or can I assign them to a variable?

EDIT

The following function fails to work in the conditional.

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 < 1400 ) { 
     collapseMenu();
}

Answer 1

What about wrapping it all in a function?

function runAnimation(){
    var viewport = $(window).width();
    if ( viewport < 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");
    }
 }

So later you can simply call:

$(window).resize(function() {
    runAnimation();
    //.... 
});

$("#hidePanel").click(function(e){
    runAnimation();
    //.... 
});