Ich bin neu in jQuery und baue einen Basisblock, der sich nach links bewegt, wenn ich nach links drücke. bewege dich nach rechts, wenn ich nach rechts drücke. Es funktioniert perfekt. Anstatt css webkitTransform direkt zu verwenden, möchte ich jedoch Animationen verwenden, um die Bewegung reibungsloser zu gestalten. Hier ist mein erster Code: http://jsfiddle.net/hphchan/c2zzhjwL/.

Ich habe den ganzen Tag nach dieser Vorgehensweise gesucht, kann aber immer noch keine Antwort finden. Ich stelle fest, dass es eine .animate() integrierte Methode für jQuery und step gibt. Ich weiß jedoch nicht, wie ich es machen soll, damit es funktioniert.

Vielen Dank.

2
CHANist 5 Aug. 2015 im 12:36

3 Antworten

Beste Antwort

Mit .animate können Sie ersetzen

$spinner.css("webkitTransform", "translate(" + i + "px, 0)");

Mit

$spinner.animate({ left: i }, {
       duration: 500, //change this according to your need
       step: function(now, fx){
            $spinner.css("margin-left", now);
       }
});

DEMO

Artikel wenn Sie mehr im Detail wollen

0
Guruprasad Rao 5 Aug. 2015 im 09:43

Mit animieren können Sie verwenden:

$spinner.animate({
    left: i
}, 200); 

Dazu müssen Sie die Position Ihres #spinner auf relativ oder absolut setzen. Wenn Sie ein Spiel erstellen möchten, ist dies für die Hitboxen nützlich.

Demo hier

0
Mteuahasan 5 Aug. 2015 im 09:51

Sie haben sehr viel weniger Zeit, um den Spinner zu animieren. Ich würde vorschlagen, CSS zu verwenden, um das gleiche Ergebnis zu erzielen. Dies ist das Beispiel.

#spinner {
   width : 50px;
   height : 10px;
   background-color : #000;
   -webkit-transition: all .6s; /* Safari */
   transition: all .6s;
}
0
venkat7668 5 Aug. 2015 im 09:49