Jquery 展开div,固定在右中心点
以下是我的例子: 我有3个div,就像一个有3行的列 当悬停在第一个div中时,它会从上到下、从右到左增长 当悬停在第三个div中时,它会从下到上、从右到左增长 问题是第二行的div。 它需要一部分向上生长,一部分向下生长。但是固定在中间。 现在,在这个例子中,它只从上到下增长 我已经尝试在jQuery动画中添加“top:-25px”,但它会出现在包装器的顶部 谢谢Jquery 展开div,固定在右中心点,jquery,css,jquery-animate,position,Jquery,Css,Jquery Animate,Position,以下是我的例子: 我有3个div,就像一个有3行的列 当悬停在第一个div中时,它会从上到下、从右到左增长 当悬停在第三个div中时,它会从下到上、从右到左增长 问题是第二行的div。 它需要一部分向上生长,一部分向下生长。但是固定在中间。 现在,在这个例子中,它只从上到下增长 我已经尝试在jQuery动画中添加“top:-25px”,但它会出现在包装器的顶部 谢谢 抱歉,如果我选择了错误的词语进行解释。请尝试top-=25px。如果执行top:-25px操作,则将其设置为超出页面顶部 代码中的
抱歉,如果我选择了错误的词语进行解释。请尝试
top-=25px代码>。如果执行top:-25px
操作,则将其设置为超出页面顶部 代码中的以下修改将解决您的问题
请注意,此解决方案特定于您提供的绝对数和您提供的代码
您可以轻松地调整它,使其变短,并使其在整个解决方案中动态工作
我的目的是向您展示如何解决这一问题
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>
对于CSS,不需要对jsfiddle.net代码中提供的CSS进行任何更改。谢谢。我尝试了position().top,但没有设置top内联样式。我还没有考试,明天我会考。Tks,我在手机上:)
<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>
$(" .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");
}
});