Q:

expand div, fixing in right center point

Here is my example: http://jsfiddle.net/lcssanches/qtaUA/
$(" .inner_left, .inner_right ").hover(function() {
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px" }, 250);
        $(this).css("background-color", "#D0D0D0");
    },function() {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
});

I have 3 divs, like a column with 3 rows.
When hover in the first div, it grows from top-to-bottom and right-to-left
When hover in the third div, it grows from bottom-to-top and right-to-left
The problem is the div that is in the second line.
It need to grow part to top, and part to bottom. But fixed in the center.
Now, in the example it only grow from top to bottom.
I already try to put "top: -25px" int the jQuery animate, but it go to the top of wrapper.
Thanks
Sorry if I choose wrong words to explain.

A:

The following modifications in your code will solve your problem.
Please note that this solution is specific to your provided absolute numbers and your provided code.
You can tweak it easily to make it shorter and make it work across your solution dynamically.
My intention is to show you how you can work around this.
The HTML part:
<div class="wrapper">

    <div class="menu_right">
        <div class="item_right"><div class="inner_right"  style="top: 0px; right:0px;"><a href="#">1</a></div></div>
        <div class="item_right"><div class="inner_right" id="middleRow" style="top: 130px;  right:0px;"><a href="#">2</a></div></div>
        <div class="item_right" ><div class="inner_right"  style="bottom: 0px; right:0px;"><a href="#">3</a></div></div>
    </div>
</div> 

The JavaScript part:
$(" .inner_left, .inner_right ").hover(function() {
    var currentId = $(this).attr('id');
    if (currentId == "middleRow")  {
        var topPos = $(this).position().top - 25;
        var topPosPx = topPos + "px"; //or you could simply put 105px here specific to your code
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px", top: topPosPx }, 250);
        $(this).css("background-color", "#D0D0D0");
    }
    else {
        $(this).css("z-index", "99999");
        $(this).stop(true,false).animate({ width: "240px",height: "180px" }, 250);
        $(this).css("background-color", "#D0D0D0");
    }
},function() {
        var currentId = $(this).attr('id');
    if (currentId == "middleRow")  {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px", top: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
    }
    else  {
        $(this).css("z-index", "");
        $(this).stop(true,false).animate({ width: "125px",height: "130px"   }, 250);
        $(this).css("background-color", "#ffffff");
    }
});

For the CSS, no changes are needed on the provided css in your jsfiddle.net code.

