点击隐藏图像按钮

我正在使用淡入和淡出来闪烁图像。

  <i id="abc" class="icon-thumbs-up glowed"></i>
  <br /><i id="abc1" class="icon-thumbs-up glowed"></i>
  <br /><i id="abc2" class="icon-thumbs-up glowed"></i>
  <br /><br />
  <input type="button" value="abc" onclick="ShowImage('abc')" />
  <input type="button" value="abc1" onclick="ShowImage('abc1')" />
  <input type="button" value="abc2" onclick="ShowImage('abc2')" />

效果很好但是我想在点击按钮时隐藏图像怎么做

I tried with

$("#" + id).hide(); //To hide
document.getElementById(id).style.display = "none";

但有时会自动显示图像

我试过了。

http://jsbin.com/atofif/105/edit

loop("abc");
loop("abc1");
loop("abc2");
function loop(id){
    $('#' + id).fadeIn(700, function(){
      $(this).fadeOut(700,loop(id));
    });
}
function ShowImage(id){
   $("#" + id).hide();
}

请帮助隐藏图像。

Thanks in advance

function loop(id){
    $('#'+ id).fadeIn(700, function(){
          $(this).fadeOut( 700, loop(id) );
    });
}

function HideImage(id){
   $("#" + id).stop(1,1).hide();
}

loop("abc");
loop("abc1");
loop("abc2");