link_ver1
link_ver2

ver1はクリックで、ver2はマウスオーバーでリンクが移動します。

要JQuery
※Firefox以外での動作不明

【i=-i+100について少し解説】
この式はi=0の時100、i=100の時0の値が代入されるようにしています。
横軸の位置が0pxの時に100pxに移動、100pxの時に0pxに戻すということです。
if文や条件式でやってもよいのですが、さらに簡略化しました。

式の求め方
(0,100)、(100,0)の2点を通る直線の方程式を求めます。
求める式をy=ax+bとすると
(0,100)より　100=0a+b
ゆえにb=100

(100,0)より　0=100a+b
b=100を代入
0=100a+100
ゆえにa=-1
したがって、y=-x+100

これでx=0の時y=100、x=100の時y=0が求まる方程式がわかりました。
スクリプト上ではxを使ってyを求めたいので、代入式の右辺は
-変数 + 100 でよいことがわかります。(1)
左辺については値を受け取る変数を設定します。(2)
重要なのはこの(1)(2)で使う変数が共通でよいということです。
この変数の値は0または100にしかならないので、
y=-x+100の式において何度演算を繰り返しても0と100を行ったりきたりするだけなわけです。
ゆえに変数iを用意し、i=-i+100の式で値をスイッチするという仕組みが出来上がりました。

$("#a1").click(
  (function(){
    var i=0;
    return(
      function(){
        $("#a1").css("margin",(i=-i+100)+"px");
        return(false);
      });
  })()
);
 
$("#a2").mouseover(
  (function(){
    var i=0;
    return(
      function(){
        $("#a2").css("margin",(i=-i+100)+"px");
        return(false);
      });
  })()
);