クリック時にCSSプロパティの値を繰り返し増やすにはどうすればよいですか？

Question

別の要素をクリックするたびに、要素の値を（この場合は、減少させて、技術的に）追加したいと考えています。私がこれまで持っているもの：

$("#trigger_heritage").click(function() { 
    $(".heritage_content ul").css("margin-left", + -880); 
    // So each time clicking shall move the .heritage_content ul-element 880px further left 
}); 

それは880pxこれまで一度しか残って、しかします。私が望むのは、他の要素がクリックされるたびにこの値が増加するということです。

どうすればいいですか？

Answer 1

は簡単な例です：

$(document).ready(function() { 
    var move = 0; 
    $(".left").click(function() { 
     move -= 25; 
     $(".move").css("margin-left", move + "px"); 
    }); 
    $(".right").click(function() { 
     move += 25; 
     $(".move").css("margin-left", move + "px"); 
    }); 
}) 

フィドル：https://jsfiddle.net/gjfjahjo/

Answer 2

は、$marginLeftを言う、変数を設定し、これに関数が呼び出されるたびにインクリメントし、margin-left:$marginLeftを設定する....

Answer 3

あなたが使用することができますcss()方法に形式​​の文字列を提供することができます現在の値を修正する。これを試してみてください：

$("#trigger_heritage").click(function() { 
    $(".heritage_content ul").css("margin-left", '-=880'); 
}); 

ここ

Working example