SwitchClass

SwitchClass

Thanks for taking the time to read my question.

I'm here( http://jqueryui.com/demos/switchClass/#option-duration) and trying to figure out how to use this. I have the following code already in my page for a dialog box which I just got working.

$(document).ready(function(){
$("#LIDlink").click(function(){
$("#dialogContent").dialog({width: 360 },
  {height: 240 },
  { modal: true, 
    overlay: { opacity: 0.5, background: "black" }, 
    buttons:{"Cancel": function(){$(this).dialog('close').dialog('destroy');}}
});
});
});

I have 3 div's. The first one is small, the second one is medium, the third one is big.  If the user hovers over the first div, I'd like to make it the size of the third div, and make the second and third div's the original size of the first div. The same would hold true for hover events over the second and third div's (make the remaining div's small like div one's original size). I have my css done, so I think all I need to do is swap classes around.

Just not sure where to start. Any help would be great.
Thanks,

Brad


Edit: Updated Code

This works. Just not sure how to get it to go back after the user stops hovering.

$(document).ready(function(){
$("#LIDlink").click(function(){
$("#dialogContent").dialog({width: 360 },
  {height: 240 },
  { modal: true, 
    overlay: { opacity: 0.5, background: "black" }, 
    buttons:{"Cancel": function(){$(this).dialog('close').dialog('destroy');}}
});
});
$("#BlueBoxsm").hover(function(){
//alert("Hi");
$( ".BlueBox1" ).switchClass( "BlueBox1", "BlueBox1Hover");
$( ".BlueBoxTitle1" ).switchClass( "BlueBoxTitle1", "BlueBoxTitle1Hover");
$( ".BlueBoxCont1" ).switchClass( "BlueBoxCont1", "BlueBoxCont1Hover");
    });
});



EDIT: Code Updated

Here is what works. It is not smooth though. How do I take out the transition and just make it flip from one to the next?

$(document).ready(function(){
$("#LIDlink").click(function(){
$("#dialogContent").dialog({width: 360 },
  {height: 240 },
  { modal: true, 
    overlay: { opacity: 0.5, background: "black" }, 
    buttons:{"Cancel": function(){$(this).dialog('close').dialog('destroy');}}
});
});
$("#BlueBoxsm").hover(function(){
//Change BlueBox1
$( ".BlueBox1" ).switchClass( "BlueBox1", "BlueBox1Hover");
$( ".BlueBoxTitle1" ).switchClass( "BlueBoxTitle1", "BlueBoxTitle1Hover");
$( ".BlueBoxCont1" ).switchClass( "BlueBoxCont1", "BlueBoxCont1Hover");
//Change BlueBox2
$( ".BlueBox2" ).switchClass( "BlueBox2", "BlueBox1Hover2");
$( ".BlueBoxTitle2" ).switchClass( "BlueBoxTitle2", "BlueBoxTitle1Hover2");
$( ".BlueBoxCont2" ).switchClass( "BlueBoxCont2", "BlueBoxCont1Hover2");
//Change BlueBox3
$( ".BlueBox3" ).switchClass( "BlueBox3", "BlueBox1Hover3");
$( ".BlueBoxTitle3" ).switchClass( "BlueBoxTitle3", "BlueBoxTitle1Hover3");
$( ".BlueBoxCont3" ).switchClass( "BlueBoxCont3", "BlueBoxCont1Hover3");
    },
function(){
//Change BlueBox1 Back
$( ".BlueBox1Hover" ).switchClass( "BlueBox1Hover", "BlueBox1");
$( ".BlueBoxTitle1Hover" ).switchClass( "BlueBoxTitle1Hover", "BlueBoxTitle1");
$( ".BlueBoxCont1Hover" ).switchClass( "BlueBoxCont1Hover", "BlueBoxCont1");
//Change BlueBox2 Back
$( ".BlueBox1Hover2" ).switchClass( "BlueBox1Hover2", "BlueBox2");
$( ".BlueBoxTitle1Hover2" ).switchClass( "BlueBoxTitle1Hover2", "BlueBoxTitle2");
$( ".BlueBoxCont1Hover2" ).switchClass( "BlueBoxCont1Hover2", "BlueBoxCont2");
//Change BlueBox3 Back
$( ".BlueBox1Hover3" ).switchClass( "BlueBox1Hover3", "BlueBox3");
$( ".BlueBoxTitle1Hover3" ).switchClass( "BlueBoxTitle1Hover3", "BlueBoxTitle3");
$( ".BlueBoxCont1Hover3" ).switchClass( "BlueBoxCont1Hover3", "BlueBoxCont3");
});
$("#BlueBoxMed").hover(function(){
//Don't need to change BlueBox1 as it's already small
//Change BlueBox2
$( ".BlueBox2" ).switchClass( "BlueBox2", "BlueBox2Hover");
$( ".BlueBoxTitle2" ).switchClass( "BlueBoxTitle2", "BlueBoxTitle2Hover");
$( ".BlueBoxCont2" ).switchClass( "BlueBoxCont2", "BlueBoxCont2Hover");
//Change BlueBox3
$( ".BlueBox3" ).switchClass( "BlueBox3", "BlueBox2Hover3");
$( ".BlueBoxTitle3" ).switchClass( "BlueBoxTitle3", "BlueBoxTitle2Hover3");
$( ".BlueBoxCont3" ).switchClass( "BlueBoxCont3", "BlueBoxCont2Hover3");
    },
function(){
//Don't need to change BlueBox1 as it's already small
//Change BlueBox2 Back
$( ".BlueBox2Hover" ).switchClass( "BlueBox2Hover", "BlueBox2");
$( ".BlueBoxTitle2Hover" ).switchClass( "BlueBoxTitle2Hover", "BlueBoxTitle2");
$( ".BlueBoxCont2Hover" ).switchClass( "BlueBoxCont2Hover", "BlueBoxCont2");
//Change BlueBox3 Back
$( ".BlueBox2Hover3" ).switchClass( "BlueBox2Hover3", "BlueBox3");
$( ".BlueBoxTitle2Hover3" ).switchClass( "BlueBoxTitle2Hover3", "BlueBoxTitle3");
$( ".BlueBoxCont2Hover3" ).switchClass( "BlueBoxCont2Hover3", "BlueBoxCont3");
});
});