Question

heres my example;
http://camoconnell.com/ddu/

im at odds as how to resolve this, im not sure if the problem is restricted to the jquery or the DOM structure.

any suggestions appreciated,
thanks

Answer 1

Just put the 40% rule in front of the 60% rule. Because you have it the other way around, the hovered element is made bigger before the other is made smaller. This resulted in the bigger element no longer fitting next to the small one and being wrapped to underneath it. It is then no longer under the cursor so the hover rule no longer applies. This keeps happening back and forth. So here is the code:

$(sidesAr[target]).stop(true,true).animate({width:"40%"},600);
$(this).parent().parent().stop(true,true).animate({width:"60%"},600);

Or jQuery 1.7 as it doesn’t seem to have any problems with your code.