Question

I have a page that i have been starting to setup here http://www.brandybrowauto.com/NEW.html that has a simple 3 pane window switcher. On hover it will expand that pane and make the others smaller then on mouseout it goes back to normal. When animating, there is no gap between the left and middle pane, but there is a small sliver that gets opened between the middle and right pane. All the panes are the same size and animate at the same speed at the same time and I’m not sure whats causing that gap and if its even something i can get rid of. This may be simple, but any help is appreciated.

$(document).ready(function(){
  $("#left").hover(function(){
    $("#left").stop().animate({width:754},"fast");
    $("#right, #middle").stop().animate({width:100},"fast");
  }, function() {
    $("#left").stop().animate({width:318},"fast");
    $("#right, #middle").stop().animate({width:318},"fast");
  });

  $("#middle").hover(function(){
    $("#middle").stop().animate({width:754},"fast");
    $("#right, #left").stop().animate({width:100},"fast");
  }, function() {
    $("#middle").stop().animate({width:318},"fast");
    $("#right, #left").stop().animate({width:318},"fast");
  });

  $("#right").hover(function(){
    $("#right").stop().animate({width:754},"fast");
    $("#left, #middle").stop().animate({width:100},"fast");
  }, function() {
    $("#right").stop().animate({width:318},"fast");
    $("#left, #middle").stop().animate({width:318},"fast");
  });
});

Answer 1

Turns out this has nothing to do with the jquery. After looking at it again it was because the pane i had on the right was set to float right while the middle and left ones were float left. This caused the small gap when animating because until the animation was complete they were animating away from each other. Changed so the all float left and it worked. Thanks for those who looked into it for me.