jquery - jQueryはcss値を段階的に追加します

Question

このcssの変更で「top」の値を加算または減算したいと思います。次に、ピクセルの特定の量を指定するのではなく、外部cssによって提供される現在の値に20pxを追加したいと思います。

目標は、リストを上下に移動させることです。

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

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>​

Answer 1

編集に基づく：

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

または、次のよう20pxに使用しながら、クリックするたびに追加できます。animate

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

---

次のtop項目も指定しない限り、プロパティは機能しませんposition。

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

必要に応じて、または必要に応じて変更positionしてください。absoluterelative

.list変更中に要素をコンテナ内にのみ表示する場合は、親要素と要素にtop割り当てる必要があることに注意してください。position:relativeabsolute.list

Answer 2

この.css()メソッドでは、「+=」および「-=」の構文も使用でき.animate()ます。したがって、これを簡単に行うことができます。

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

Answer 3

完全な例については、このJSFiddleを参照してください：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');
});

</ p>

Answer 4

'up'クラスをボタンの別のIDに変更します

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

コンテナのmargin-topの現在の値を取得し、それを変更します。

$('#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)
})

Answer 5

CSSは実際には数学や操作を行うためのものではなく、単にスタイルを指定するためのものです。それを行うための最良の方法は、javascriptで、

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

例えば。CSS3アニメーションを使用するとさらに良いでしょう。このような

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)" 

Answer 6

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