Come posso spostare un div e ridimensionarlo con effetto animazione su JQuery? - jquery, html5, ridimensiona, jquery-animate, effetti jquery

Come posso sia spostare un div che ridimensionarlo con effetto animazione su JQuery?

cioè div sarà al centro dello schermo e andrà sul lato sinistro e avrà% 50 della sua altezza e% 50 della sua larghezza dopo aver completato la sua mossa (avrà ad esempio% 75 della sua dimensione al centro a modo suo)

MODIFICARE: Ho provato questo:

$(".block").animate({"left": "-=100px", "height": "-=30%", "width":"-=30%" }, 1000);

Tuttavia scompare?

EDIT2: Questo funziona:

$(".block").animate({"left": "-=100px", "height": "30%", "width":"30%" }, 1000);

Comunque rende il mio quadrato più grande, provo = -30% ma non funziona. Cosa devo fare per rimpicciolire invece di ingrandirlo?

risposte:

Sembra che l'ultima riga stia impostando l'altezzae larghezza proprietà css al 30%. Ti aspetti che sia il 30% delle dimensioni precedenti, ma in realtà è il 30% del genitore di dimensioni più vicine del blocco, che sembra essere più grande delle dimensioni precedenti.

Non credo che ci sia un modo semplice per ridimensionareuna determinata percentuale della dimensione precedente (come una sintassi speciale in animata o giù di lì). Suppongo che devi codificare una funzione javascript che calcola la nuova larghezza da quella vecchia.

Dato che desideri ridimensionare un solo elemento, ti consiglio vivamente di utilizzare l'ID elemento anziché la sua classe. Quindi la seguente riga dovrebbe fare quello che vuoi:

$("#block").animate({"left": "-=100px", "height": $("#block").height()*0.5, "width":$("#block").width()*0.5 }, 1000);

È possibile utilizzare la funzione animata di jQuery. Puoi controllare questo link:

  http://api.jquery.com/animate/

Nel link sopra, esempi mostra tutte le cose che vuoi (come cambiare la larghezza con l'animazione). Si prega di controllare l'esempio.