jquery - JQuery .click と .toggle を使用して同心円を縮小および拡大する

Question

次のコードを使用して、別の円で円を拡大および縮小しようとしています。

$(document).ready(function(){
  $("#inner-circle").click(function(){
    $("#inner-circle").toggle(
      function(){
        $(this).transition({ "height":'1.0em',
                             "width":'1.0em',
                             "margin-top":'3.2em',
                             "margin-left":'3.2em'
                            }, 1000);
      },
      function(){
        $(this).transition({ "height":'1.875em',
                             "width":'1.875em',
                             "margin-top":'3.75em',
                             "margin-left":'3.75em'
                            }, 1000);
      }
      )});
});

$(document).ready(function(){
  $("#data1").hover(function(){
    $("#data1").toggle(
      function(){
        $(this).css({"background":"blue"});
      },
      function () {
        $(this).css({"background":"red"});
      },
      function () {
        $(this).css({"background":"orange"});
      });
  });
});

しかし、表示される実際の動作は、間違いなく私が探しているものではありません (そして、奇妙なことに、JSFiddle を介して実行するか、ブラウザー (Firefox) を介して HTML ファイルとして実行するかによって異なります)。JSFiddle のリンクは次のとおりです: http://jsfiddle.net /Ue9pu/

どんな助けでも大歓迎です。