jQuery hinzufügen von css-Wert inkrementell

Möchte ich hinzufügen, oder subtrahieren Sie den Wert von 'top' in der css ändern. Dann eher die Angabe einer bestimmten Anzahl von Pixeln, würde ich gerne hinzufügen von 20px auf den aktuellen Wert gestellt, die von der externen css.

Ziel ist es, die Liste bewegen, bis eine nach unten.

$('.up').click(function(){
   $('.list').css('top','-20px');
});

den HTML -

<div id="container">
    <ul class="list">
        <li >first item</li>
        <li class="active">second item</li>
        <li>third item</li>
        <li >fourth item</li>
    <ul>
</div>   
<a href="#" class="up">up</a>
<a href="#" class="up">down</a>​

InformationsquelleAutor patrick | 2012-05-04

  1. 13

    Basierend auf Ihren edit:

    $('.up').click(function(){
   $('.list').css({position:'absolute', top: parseInt($('.list').css('top'), 10) + 20 + 'px'});
});

    Oder fügen Sie 20px mit jedem Klick, während mit animate wie diese:

    $('.up').click(function(){
   $('.list').css({position:'absolute'});
   $('.list').animate({top: '+=20'});
});

    Den top Eigenschaft wird nicht funktionieren, es sei denn, Sie geben auch position:

    $('.up').click(function(){
   $('.list').css({position:'absolute', top:'-20px'});
});

    Ändern position zu absolute oder relative wie pro Ihre Notwendigkeiten.

    Beachten Sie, dass, wenn Sie wollen, dass die .list element erscheint nur innerhalb seines Containers beim Wechsel top Sie zuweisen müssen position:relative zum übergeordneten element und absolute zu .list element.

    vielen Dank für Eure Hilfe!!!
    Sie sind herzlich willkommen

    InformationsquelleAutor Sarfraz

  2. 8

    Den .css() Methode erlaubt auch die "+=" und "- = " - syntax, die .animate() nimmt. So können Sie einfach, dies zu tun:

    $('.up').click(function(){
   $('.list').css('top','-=20px');
});
    Dies sollte sein die beste Lösung imo.

    InformationsquelleAutor Doug

  3. 1

    Sehen dieses JSFiddle ein vollständiges Beispiel: http://jsfiddle.net/NYVmw/

    $('.up').click(function(){
    var newtop = $('.list').position().top - 20;
    $('.list').css('top', newtop + 'px');
});

$('.down').click(function(){
    var newtop = $('.list').position().top + 20;
    $('.list').css('top', newtop + 'px');
});

    wow, ich dachte, ich wüsste, was ich tun wollte, aber dies war ein Spiel-wechsler für mich. Vielen Dank!

    InformationsquelleAutor Rody van Sambeek

  4. 0

    Ändern Sie Ihre " up "- Klasse in verschiedenen id ' s für die buttons

    <a href="#" id="up">up</a>
<a href="#" id="down">down</a>​

    Nehmen den aktuellen Wert des Containers margin-top und ändern Sie es :

    $('#up').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue -= amount;
  $('#container').css("margin-top", currentValue)
})

$('#down').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue += amount;
  $('#container').css("margin-top", currentValue)
})

    InformationsquelleAutor gabitzish

  5. 0

    CSS ist nicht wirklich tut für Mathematik und operations, aber mehr nur für die Angabe Ihrer Stile. Der beste Weg, es zu tun wäre, in javascript,

    getElementById("nameofyourelement").style['top'] = "5px"

    zum Beispiel. Mit CSS3-Animationen wäre sogar besser. Wie diese

    getElementById("nameofyourelement").style['-webkit-transition-duration'] = "1s" //1 second duration for animation, set to 0 if you don't want animation
getElementById("nameofyourelement").style['-webkit-transform'] = "translateY(5px)"

    InformationsquelleAutor marklar

  6. -2

    $('.list').css('position','relative').css('top','-20px');

    falsche Schreibweise jQuery, Sie hätten zusammengeführt, die css-Funktionen. $('.list').css({'position':'relative', 'top':'-20px'});
    Ich will einfach nur, um mehr Aufmerksamkeit auf position. und auch, es ist nicht FALSCH, es funktioniert so gut
    ja, es wird das Resultat richtig ist, aber gehen Sie lieber gleich zu werden in Ihrem Projekt verwendet haben?? es ist eine falsche Vorstellung von Berufung gleiche Funktion zweimal, in der Erwägung, dass es getan werden kann, in einem.

    InformationsquelleAutor Eric Yin

Schreibe einen Kommentar