使用jQuery扩展div不移动div漂浮到它 [英] Making a div expand with jQuery without moving divs floating to it
问题描述
我想获得类似于 http：// www.nokiausa.com/us-en/products/ ，其中有一个基本信息网格，其中点击扩展了邻近项目的信息。
一个问题我有扩展我的div是使邻居div移动 - 我想我可能必须使用克隆函数来产生一个绝对定位的孩子，但我不知道我该怎么做。
< head>
< script src =jquery-1.7.min.js>< / script>
< script src =jquery.color.min.js>< / script>
< script type =text / javascript>
function growRight（）{
$（'＃stuff1'）。animate（{
backgroundColor：＃FF8600
}，750）;
$（'＃stuff1'）。animate（{
width：510px
}，750，function（）{}）;
}
< / script>
< style>
ul {
display：block;
width：520px;
background-color：＃888888;
}
li {
position：relative;
overflow：hidden;
显示：block;
float：left;
height：250px;
width：250px;
background-color：＃B8B8B8;
margin：5px;
}
p {
display：block;
}
div.contentright {
position：absolute;
top：0px;
left：250px;
width：260px;
height：250px;
}
.clearLeft {
clear：left;
}
< / style>
< / head>
< body>
< ul id =gridbox>
< li class =stuffid =stuff1>
< a href =javascript：growRight（）>东西1< / a>
< div class =contentright>
这是一个内容负载。内容内容内容。
< / div>
< / li>
< li>
Stuff 2
< / li>
< li>
Stuff 3
< / li>
< li>
Stuff 4
< / li>
< / ul>
< / body>
好，我设法找到一个解决方案遵循我在问题中提到的方法 - 这克隆细胞，反过来动画。 CSS属性确保expandatorright绝对位于它的父对象之上（当然，z-index确保它在其他任何对象之上）。
code> function growRight（）{
$（'。stuff'）
.clone（false）
.addClass（'expandinatorright'）
.appendTo '。东东'））;
$（'。expandinatorright'）。animate（{
backgroundColor：＃FF8600
}，750）;
$（'。expandinatorright'）。animate（{
width：510px
}，750，function（）{}）;
}
我希望这对任何可能遇到类似问题的人都有用。 / p>
I'm trying to get an effect similar to what you can find at http://www.nokiausa.com/us-en/products/ with a grid of basic information, where a click expands information over a neighbouring item.
One problem I'm having is that expanding my div is making the neighbouring div move - I think I might have to use the clone function to produce a child with absolute positioning but I'm not sure how I would actually do that.
<head>
<script src="jquery-1.7.min.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
function growRight(){
$('#stuff1').animate({
backgroundColor: "#FF8600"
}, 750 );
$('#stuff1').animate({
width: "510px"
}, 750, function() {});
}
</script>
<style>
ul{
display:block;
width:520px;
background-color:#888888;
}
li{
position:relative;
overflow:hidden;
display:block;
float:left;
height:250px;
width:250px;
background-color:#B8B8B8;
margin:5px;
}
p{
display:block;
}
div.contentright{
position:absolute;
top:0px;
left:250px;
width:260px;
height:250px;
}
.clearLeft{
clear:left;
}
</style>
</head>
<body>
<ul id="gridbox">
<li class="stuff" id="stuff1">
<a href="javascript:growRight()">Stuff 1</a>
<div class="contentright">
This is a load of content. Content content content.
</div>
</li>
<li>
Stuff 2
</li>
<li>
Stuff 3
</li>
<li>
Stuff 4
</li>
</ul>
</body>
Ok, I managed to find a solution which pretty much follows the approach I mentioned in the question - this clones the cell, which in turn animates. CSS properties ensure "expandinatorright" sits absolutely on top of its parent (of course, with z-index making sure it is rendered above everything else).
function growRight(){
$('.stuff')
.clone(false)
.addClass('expandinatorright')
.appendTo($('.stuff'));
$('.expandinatorright').animate({
backgroundColor: "#FF8600"
}, 750 );
$('.expandinatorright').animate({
width: "510px"
}, 750, function() {});
}
I hope this is useful for anyone who might run into a similar problem.
这篇关于使用jQuery扩展div不移动div漂浮到它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
