Fazer uma div expandir com jQuery sem mover divs flutuando para ele

Question

Nov 21, 2011, 11:35 PM

Fazer uma div expandir com jQuery sem mover divs flutuando para ele

Estou tentando obter um efeito semelhante ao que você pode encontrar emhttp: //www.nokiausa.com/us-en/products com uma grade de informações básicas, em que um clique expande as informações sobre um item vizinh

Um problema que estou tendo é que expandir minha div está fazendo com que a div vizinha se mova - acho que talvez precise usar a função clone para produzir um filho com posicionamento absoluto, mas não tenho certeza de como faria iss

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