展开 div，固定在右中心点答案

【问题标题】：expand div, fixing in right center point展开 div，固定在右中心点
【发布时间】：2013-03-19 13:59:29
【问题描述】：

这是我的例子：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");
});

我有 3 个 div，比如一列有 3 行。

当鼠标悬停在第一个 div时，它从上到下和从右到左增长

当鼠标悬停在第三个 div时，从下到上，从右到左增长

问题在于第二行中的 div。它需要部分向上生长，部分向下生长。但固定在中心。现在，在示例中它只从上到下增长。

我已经尝试将 "top: -25px" 放入 jQuery 动画中，但它进入了包装器的顶部。

谢谢

对不起，如果我选择了错误的词来解释。

【问题讨论】：

标签： jquery css jquery-animate position

【解决方案1】：

您的代码中的以下修改将解决您的问题。

请注意，此解决方案特定于您提供的绝对数字和您提供的代码。

您可以轻松地对其进行调整以使其更短，并使其在您的解决方案中动态运行。

我的目的是向您展示如何解决这个问题。

HTML 部分：

<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>

JavaScript 部分：

$(" .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");
    }
});

对于 CSS，不需要对 jsfiddle.net 代码中提供的 css 进行任何更改。

【讨论】：

谢谢。我尝试使用 position().top 但我没有设置顶部内联样式。我还没考，明天考。 Tks，我在手机上:)

【解决方案2】：

试试top-=25px;。如果您执行top:-25px，则将其设置为超出页面顶部。

【讨论】：