Hacer que un div se expanda con jQuery sin mover divs flotando hacia él

Question

Nov 21, 2011, 11:35 PM

Hacer que un div se expanda con jQuery sin mover divs flotando hacia él

Estoy tratando de obtener un efecto similar al que puedes encontrar enhttp: //www.nokiausa.com/us-en/products con una cuadrícula de información básica, donde un clic expande la información sobre un elemento vecino.

Un problema que tengo es que expandir mi div está haciendo que el div div se mueva: creo que podría tener que usar la función de clonación para producir un niño con posicionamiento absoluto, pero no estoy seguro de cómo lo haría realmente.

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