jquery: simultaneous resizing?

[turpentyne]

I have several rollover images that resize, then return to original when moused over.

When an image animates, its movements are sequential, not synchronous. It gets taller, then wider. I want these to happen at the same time. Any thoughts?

Here's a snippet of my current animation:

 $(".square.one,#link_nest").mouseenter(function(){

    if ($(".the-nest")[0]){
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
        }
    else{

        $(".square.one").filter(':not(:animated)').animate({width:"150px",height:"220px"},200);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
    } 
 });

[JorgeM]

Without the rest of your code, Its not easy to test it.. but I have a similiar example which resizes width and height and it seems to work as expected...

http://jsfiddle.net/y9YsD/

[turpentyne]

Doesn't seem to for me. Perhaps because I have the images set into container divs?

Here's essentially what I have:

$(document).ready(function(){




/* now the image animations */


var $width_one = $("#sq1").width();
var $height_one = $("#sq1").height();

var $width_two = $("#sq2").height();
var $height_two = $("#sq2").height();

var $width_three = $("#sq3").width();
var $height_three = $("#sq3").height();

var $width_four = $("#sq4").width();
var $height_four = $("#sq4").height();


 $(".square.one,#link_nest").mouseenter(function(){

    if ($(".the-nest")[0]){
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
        }
    else{

        $(".square.one").filter(':not(:animated)').animate({width:"155px",height:"219px"},300);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
        $("#square_caption1").css('visibility','visible');
    } 
 });


 $(".square.one,#link_nest").mouseleave(function(){
    if ($(".the-nest")[0]){
        $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
    }
    else{
        $(".square.one").filter(':not(:animated)').animate({width:$width_one,height:$height_one},300);

        $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
        $("#square_caption1").css('visibility','hidden');
    }

 });



 $(".square.two,#link_hillcrest").mouseenter(function(){
    if ($(".the-nest")[0]){
        $("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
     }
     else{
         $(".square.two").filter(':not(:animated)').animate({height:"220px",top:"113px"},200);
         $("#link_hillcrest").css({color:"#153d53",fontWeight:"400"},100);
         $("#square_caption2").css('visibility','visible');
     }
 });

 $(".square.two,#link_hillcrest").mouseleave(function(){
    if ($(".the-nest")[0]){
      $("#link_hillcrest").css({color:"black",fontWeight:"300"},100);
  }
else{
        $(".square.two").filter(':not(:animated)').animate({height:$height_two,top:"125px"},200);
        $("#link_hillcrest").css({color:"black",fontWeight:"300"},100);
        $("#square_caption2").css('visibility','hidden');
     }
  });



 $(".square.three,#link_3little").mouseenter(function(){
    if ($(".the-nest")[0]){
        $("#link_3little").css({color:"#153d53",fontWeight:"400"},100);
     }
    else{

        $(".square.three").filter(':not(:animated)').animate({left:"225px",width:"250px",height:"170px",top:"156px"},200);
        $("#link_3little").css({color:"#153d53",fontWeight:"400"},100);
        $("#square_caption3").css('visibility','visible');

    }
  });

 $(".square.three,#link_3little").mouseleave(function(){
    if ($(".the-nest")[0]){
        $("#link_3little").css({color:"black",fontWeight:"300"},100);
     }
     else{


         $(".square.three").filter(':not(:animated)').animate({left:"230px",height:$height_three,width:$width_three,top:"170px"},200);
         $("#link_3little").css({color:"black",fontWeight:"300"},100);
         $("#square_caption3").css('visibility','hidden');
    }
  });



 $(".square.four,#link_early,.reg3").mouseenter(function(){
    if ($(".the-nest")[0]){
        $("#link_early").css({color:"#153d53",fontWeight:"400"},100);
     }
     else{

         $(".square.four").filter(':not(:animated)').animate({width:"200px",height:"140px"},200);
         $("#link_early").css({color:"#153d53",fontWeight:"400"},100);
         $("#square_caption4").css('visibility','visible');



    }
  });

 $(".square.four,#link_early,.reg3").mouseleave(function(){
    if ($(".the-nest")[0]){
        $("#link_early").css({color:"black",fontWeight:"300"},100);
        }
    else{
        $(".square.four").filter(':not(:animated)').animate({width:"190px",height:"135px"},200);
        $("#link_early").css({color:"black",fontWeight:"300"},100);
        $("#square_caption4").css('visibility','hidden');
    }
  });
}


/* end image animations ... start of other code */

And the html:

<div class="square one" id="sq1" style="overflow:hidden;">
            <div id="square_caption1" class="square_captions">The Nest</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;">
                <img class="bottom" style="width:120%;" src="images/the_nest_residences_1_color.jpg">
                <img class="top" style="width:120%;" src="images/the_nest_residences_1.jpg">
            </div>


        </div>
            <div class="gallery-subs" style="height:0px;overflow:visible; position:relative; top:340px;left:65px;z-index:40; display:none;opacity:0;">
                <div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
                    <a href="images/examples/image-1.gif" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_1"><img src="images/gallery/nest_thumb1.jpg" id="nest_thumbs_1" class="gallery_thumbs"></a>
                </div>
                <div style="height:30px;width:30px;background-color:#ffffff;float:left;margin-right:20px;">
                    <a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_2"><img src="images/gallery/nest_thumb2.jpg" id="nest_thumbs_2" class="gallery_thumbs"></a>
                </div>
                <div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
                    <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_3"><img src="images/gallery/nest_thumb3.jpg" id="nest_thumbs_3" class="gallery_thumbs"></a>
                </div>
            </div>







        <div class="square two" id="sq2" style="">
            <div id="square_caption2" class="square_captions">Hillcrest Village</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="height:120%;" src="images/the_nest_residences_2_color.jpg" id="pic_hillcrest_bw">
                <img class="top" style="height:100%;" src="images/the_nest_residences_2.jpg" id="pic_hillcrest_color">
            </div>

        </div>


        <div class="square three" id="sq3" style="margin-left: 20px; width: 220px;">
            <div id="square_caption3" class="square_captions">Three Little Birds</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="width:120%;" src="images/the_nest_residences_3_color.jpg">
                <img class="top" style="width:120%;" src="images/the_nest_residences_3.jpg">
            </div>
        </div>

        <div class="square four" id="sq4" style="">
            <div id="square_caption4" class="square_captions">Early Registration</div>
            <div id="cf" style="overflow:hidden;height:100%;width:100%;"">
                <img class="bottom" style="width:120%;" src="images/the_nest_residences_4_color.jpg">
                <img class="top" style="width:120%;" src="images/the_nest_residences_4.jpg">
            </div>
        </div>

[turpentyne]

actually, I think I figured it out. The images are set to 120%. I need it on one of them, but not on the rest. When I remove that, the animation looks more consistent.

Now for the rest of the issues. Like the mouseout not registering when I go too fast.