JavaScript animar cambio de tamaño div

Estoy tratando de poner una pequeña animación en una página. Tengo 2 divs lado a lado, el segundo de los cuales tiene su contenido llamado a través de Ajax, por lo que el div altura varía sin recargar la página.

<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />

Básicamente, esto me da un 2 diseño de la columna, y la imagen de los nidos debajo de la columna de la izquierda, no importa lo que la altura. Todo bien!

De lo que yo estoy tratando de hacer es animar la transición de la imagen cuando la página de cambios de altura gracias a la entrada de contenido Ajax. En la actualidad, la imagen se masturba en torno a arriba y abajo, me gusta bastante tener que suavemente se deslizan hacia abajo de la página.

Es esto posible? No estoy muy metido en mi JavaScript, así que no estoy seguro de cómo hacer esto. Estoy usando la librería jQuery en el sitio, por lo que podría ser un camino a seguir?

InformationsquelleAutor MrFidge | 2009-06-24

3 Kommentare

  1. 6

    OK, acabo de poner juntos en un rápido y sucio ejemplo.

    Aquí está el código HTML:

        <body>
            <a href="####" id="addContent">Add content</a>
            <div id="outerContainer">
                <div id="left" class="col">
                    <p>Static content</p>
                    <img src="images/innovation.gif" width="111px" height="20px">
                </div>
                <div id="right" class="col">
                    <p>Ajax content</p>
                </div>
            </div>
        </body>

    El jQuery utilizado es aquí

        jQuery(function($){
        var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
    
        $("#addContent").click(function(e){
            $("#right").append(addedHTML);
            var rightHeight = $("#right").height();
    
            //Animate the left column to this height
            $("#left").animate({
                height: rightHeight
            }, 1500);
        });});

    Y CSS:

        #outerContainer {
            position: relative;
            border: 1px solid red;
            margin: 20px auto 0;
            overflow: hidden;
            width: 400px;}
        .col {
            width: 180px;
            display: inline;
            padding: 0 0 40px;}
        #left {
            float: left;
            border: 1px solid cyan;
            position: relative;}
        #left img {
            position: absolute;
            bottom: 0;
            left: 0;}
        #right {
            position: absolute;
            top: 0;
            left: 180px;
            border: 1px solid green;}
        #addContent {
            text-align: center;
            width: 100px;
            margin: 20px auto 0;
            display: block;}

    He añadido un botón para añadir un poco de ‘Ajax’ de contenido. Al hacer esto se agarra a la nueva altura del div y anima a la altura. Usted puede agregar algunos de aceleración para la animación /cambiar la velocidad para hacer un poco más pulido.

    Espero que esto ayude.

    • usted puede proporcionar una demostración en vivo de la OP por poner el código en el jsbin.com y, a continuación, vincular a los salvados dirección URL pública
    • Ah ok, gracias por la sugerencia. Eso suena mucho más fácil de lo que lo hice anteriormente 🙂
    • Ok aquí está el jsbin versión jsbin.com/uyoxi. He adjuntado una imagen a la parte inferior de la columna de la izquierda en mi dev versión, pero usted debe ver donde el código es para editar. ufff!
    • Eso es calidad! Muchas gracias 🙂
  2. 1

    Tal vez usted podría utilizar un contenedor de todo el contenido de divs (con rebosadero oculto) y cambiar el tamaño de que uno de acuerdo a la altura de los contenidos, logrando así lo que estás tratando de hacer?

    • OK, pero ¿cómo se podría ir sobre la animación al cambiar el tamaño, eso es lo que realmente necesitamos entender.
  3. 0

    Estoy de acuerdo con la respuesta anterior. Se podría aplicar a la imagen como una imagen de fondo del contenedor, a continuación, animar el contenedor. De esa manera el fondo de la imagen se moverá hacia abajo con el contenedor (suponiendo que se ancla a la parte inferior que es!)

    • Ah, yo probablemente debería haber sido más específico – he puesto el código que aquí se muestra una imagen, pero a veces será necesario un archivo de flash, así que no puedo usar el background: url() de la propiedad.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea