这是我的例子: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 上时,它会从上到下和从右到左增长
当悬停在third div 时,它会从下到上,从右到左增长
问题出在第二行的 div 上。 它需要部分增长到顶部,部分增长到底部。但固定在中心。 现在,在示例中它只从上到下增长。
我已经尝试将“top: -25px”放入 jQuery 动画中,但它会转到包装器的顶部。
谢谢
对不起,如果我选择了错误的词来解释。
最佳答案
您的代码中的以下修改将解决您的问题。
请注意,此解决方案特定于您提供的绝对数字和您提供的代码。
您可以轻松调整它以使其更短,并使其在您的解决方案中动态运行。
我的目的是向您展示如何解决这个问题。
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 无需更改。
关于jquery - 展开div,固定在右中心点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15693561/