Efecto al insertar un dato

chuncho_villero10 · #1 (**permalink**) 13/03/2012, 07:18

Estimados, necesito de su ayuda, tengo una lista de datos y necesito que al llenar otro este se posicione encima de los demas desplazandolos hacia abajo, el drama que tengo es que me lo piden con una animacion de que como si se corrieran hacia abajo

se que se puede co jquery pero no se como

muchas gracias

Naahuel · #2 (**permalink**) 13/03/2012, 08:17

Va a depender de cómo estés mostrando tus datos. Con una lista, una tabla, etc.

Ejemplo con lista:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var nuevoDato = 'Audite deo hanc cuius ad nomine Stranguillio eam eos cui sed esse haec in.';
            var contenedor = $('ul#lista-de-datos');
            $('#insertar-datos').click(function(){
                var nuevoElemento = $('<li />');        //crear nuevo elemento
                nuevoElemento.text(nuevoDato).hide();   //asignar texto al nuevo elemento y esconderlo por defecto.
                contenedor.prepend(nuevoElemento);      //agregar elemento nuevo al principio
                nuevoElemento.slideDown();              //aplicar animación
            });
        });
    </script>
    <style type="text/css">
    <!--
        ul{
            width:500px;
            margin:30px;
            padding:0;
        }
        ul li{
            list-style:none;
            padding:5px;
            margin-bottom:2px;
            background:#CCC;
        }
        ul li:nth-child(odd){
            background:#EEE;
        }
    -->
    </style>
</head>
<body>
    <button id="insertar-datos">Insertar dato nuevo</button>
    <ul id="lista-de-datos">
        <li>Lorem ipsum dolor sit amet, tempore Quaere allocutus ait regem consolatus dum animae tuae designaverant ut a civitas ex quae.</li>
        <li>Non potentia feugiat o sanguine instaret terrae in. </li>
        <li>Volentes mihi servitute meam contra me naufragus qui non potentiae. </li>
        <li>Navibus celebrent duo elitr qui enim.</li>
    </ul>
</body>
</html>

El ejemplo está comentado para que lo comprendas y puedas modificar a tu gusto y necesidad.

Saludos