2012-02-23 11 views
12

¿Cómo puedo animar desde la posición actual al centro usando position({of:,my:,at:})? ¿Hay alguna manera de automatizar el proceso, o tengo que animar las propiedades de CSS manualmente?animando la posición de jQuery Ui()

+0

Consulte la función http://api.jquery.com/animate/, puede especificar un conjunto de valores de CSS y jquery hará la transición. – Yogu

Respuesta

1

¿Has mirado .animate()?

Editar: Ahora que entiendo lo que está buscando un poco mejor, here is a jQuery plugin that I wrote to do this very thing.

Here's a quick jsFiddle as an example.

Hice las opciones de un objeto configurable. Ejemplo:

$('#clickme').click(function() { 
    $('#blah').align({speed:1000,y:false}); 
});​ 

EDITAR: sacar el otro código ya que ya no es necesario y simplemente abarrota las cosas. Limpiando mi nuevo código Se corrigieron los problemas de posicionamiento parental de desplazamiento. Se agregó un enlace al repositorio de git y jsFiddle con la última versión de la fuente.

+0

Sé de eso, pero luego tendré que calcular la división de ancho-altura de div entre 2, etc. Me preguntaba si había una forma de animar, por ejemplo: posición ({de:, mi:, en: , animate: slide}), o algo por el estilo. – localhost

+0

jsfiddle.net/MjsDc/8/ Esto lo resolvería, pero es un poco desordenado. Quería una solución para ir con la posición ({de:, mi:, en:}). – localhost

+0

@ localhost2 OK ... He escrito el código para esto en realidad ... era una extensión de jQuery de centrado de objetos que utilicé en un sitio de cliente ... tengo que ver si puedo desenterrarlo ... –

24

Esta respuesta puede haber sido justo en febrero, pero ahora hay una manera mucho más fácil.

El método de posición toma un argumento using solo para este propósito. Por ejemplo:

$(div).position({ 
    at: "left+50% top+50%", 
    of: $(div).parent(), 
    using: function(css, calc) { 
     $(this).animate(css, 200, "linear"); 
    } 
}); 
+0

Es bueno saberlo, gracias. – localhost

Cuestiones relacionadas