jQuery: Animating Div Resize en 'Click'

Tengo un div que estoy usando para mostrarle al usuario un estado. Su ancho es relativo al porcentaje (0-100). Al hacer clic en un botón, me gustaría animar el ancho (en píxeles) de ese div. ¿Alguna opinión sobre la mejor manera de hacerlo? Ya estoy usando jQuery, ¿supongo que usará eso para animar? (Mi panel está inicialmente oculto, de ahí la función .live).jQuery: Animating Div Resize en 'Click'

$('#slider50').live("click", function() { 

    // Animate here 

    });

Fuente

2011-09-04 Zakman411

Consulte jQuery UI (http://jqueryui.com/) y la función '.animate()' http://api.jquery.com/animate/. Hará lo que quieras. – PeeHaa

@PeeHaa No recomendaría una biblioteca de UI completa para animar un solo elemento, así como '.animate()' estando disponible en stock jQuery. – Bojangles

@JamWaffles: '.animate()' está disponible en stock ?? ¿Eso comenzó desde 1.6 algo? – PeeHaa

Según lo indicado por PeeHaa puede utilizar el .animate() jQuery la función de ampliar de que estés div anchura como se muestra en el siguiente ejemplo:

http://jsfiddle.net/DKjKP/1/

$("#button").click(function() { 
    $("#slider").animate({ 
     width: '+=30px' 
    }, 1000); 
});

Fuente

2011-09-04 02:03:54 Bassem

Puede usar jQuery effects [jQuery Effects docs] (http://api.jquery.com/category/effects/) para facilitar los efectos, además esta biblioteca extenderá las funciones $ .addClass()/$. RemoveClass() a permita la transición entre los cambios de estilo que puede usar para cambiar el ancho. – Bassem

¿Hay alguna manera de establecer un ancho absoluto? Al igual que 'ancho: 400px' – Zakman411

Por supuesto, simplemente reemplace el '+ = 30px' con '400px' lo que significa que se animará desde cualquier valor que se haya establecido originalmente en 400px. '+ =' siempre incrementará cualquier valor por lo que sea X px o porcentaje. – Bassem

Una solución fácil que creo que funcionaría sería un poco algo similar a esto:

$("#slider50").live("click", function() { 
    $(this).slideDown(); 

    /* or something like this 
    $(this).animate({ 
     'width' : '500px', 
     'height': '500px' 
    }); 
    */ 
});

espero que esto ayude

Fuente

2011-09-04 02:00:06 GoGoGarrett

jQuery: Animating Div Resize en 'Click'

Respuesta

Cuestiones relacionadas