Erhöhen Sie die CSS-Top-Eigenschaft mit jquery

Ich habe folgendes Div:

<div id="new" style="position: absolute; z-index: 100; top: 210px; width: 195px..

Was ist der beste Weg, um die zu erhöhen top Eigenschaft, wenn ein Ereignis eintritt?

Beachten Sie, dass ich versucht habe: $('#new').css('top')+10 aber das problem ist das .css gibt Zeichenfolge zurück.

Der einfachste Weg ist die Verwendung von += Operator:

$( '#new' ).css( 'top', '+=10px' );

Du kannst den … benutzen parseFloat Funktion um nur den anfänglichen numerischen Teil zu erhalten und ihn von einer Zeichenfolge in eine Zahl umzuwandeln. Zum Beispiel:

var n = $('#new');
n.css('top', (parseFloat(n.css('top')) + 10) + 'px');

Als Randbemerkung, wenn Sie die Positionen mehrerer Elemente auf einmal ändern möchten, könnte dies sein:

$('.someClass').css('top', function(i, v) {
    return (parseFloat(v) + 10) + 'px';
});

Aber wenn Sie nur versuchen, ein Element im Laufe der Zeit zu animieren, werfen Sie einen Blick auf jQuery .animate Methode.

var el = $('#new');
el.css('top', (parseInt(el.css('top'), 10) + 10) + 'px');

Ich würde sagen, erstellen Sie eine Variable, erhöhen Sie die Variable und setzen Sie dann die Eigenschaft mit dem neuen Wert zurück, so wie hier

var topProperty = 0;   //You can also populate this variable with the current value.

dann in Ihrem Klickereignis

{
topProperty += 10;
$('#new').css('top', topProperty + 'px');
}

var New = $("#new");

function onEvent()
{
   New.css("top", parseFloat(New.css("top")) + 10 + "px");
}

durch Hinzufügen des Sekundenparameters von zu CSS Ihrer Einstellung der Eigenschaft.