jQuery Animation - bewegen, um ein Feld von Koordinaten

Question

Ich habe ein <div> mit position: absolute:

<div style="top:200px; left:400px;"> 

und ich möchte es schön und langsam zu neuen Koordinaten zB verschoben werden:

<div style="top:100px; left:500px;"> 

Welche jQuery Animationseffekt kann dies tun? Oder gibt es eine andere Lösung?

Vielen Dank im Voraus

Answer 1

können Sie versuchen, Funktion animieren, nachdem Sie Ausgangsposition als absolute gesetzt haben. Auf der anderen Seite können Sie das div kopieren und das Original entfernen und dann mit der Animate-Funktion von jQuery in die neue Koordinate verschieben.

jQuery(".container").click(function() { 

var position1 = jQuery("#position1").position(); 
alert(position1.top + ', ' + position1.left); 

var position2 = jQuery(this).position(); 
alert(position2.top + ', ' + position2.left); 

}); 

und dann

$('.container').click(function(){ 
    var position1 = $('#position1').position(); 

    $(this).animate({ 'top': position1.top + 'px', 'left': position1.left + 'px'}, 150, function(){ 

    }); 
}); 

Answer 2

Sie sollten nicht verwenden jQuery für diese animieren. Es ist viel einfacher mit CSS zu arbeiten, und es sieht auch viel glatter aus.

Sie schaffen eine Klasse, die die folgenden Attribute aufweist:

.animate{ 
    transform: translate(50px, 100px); 
    transition: 1s ease-in-out; 
} 

der erste Wert in translate() ist die Anzahl der Pixel nach rechts zu verschieben, und die zweite ist die Anzahl der Pixel nach unten zu bewegen. So

, wenn wir das Beispiel, das Sie gaben uns verwenden, sollte es sein:

.animate{ 
    transform: translate(100px, -100px); 
    transition: 1s ease-in-out; 
} 

die 1s auf transition ist die Gesamtmenge von Sekunden die Animation stattfinden wird. Sie können hier Dezimalzahlen verwenden.

Die ease-in-out ist die Art, wie die Animation animiert wird. Sie können eine vollständige Liste here finden.

Wenn Sie möchten, dass die Animation startet, fügen Sie einfach die Klasse zu div hinzu. Der folgende Code wird die Klasse in den div hinzuzufügen, wenn Sie darauf klicken:

$("div").click(function() { 
    $("div").addClass("animate"); 
}); 

Sie müssen die Wähler ändern, es jetzt tun wird es auf jeden div auf Ihrer Seite zu arbeiten.