javascript - 单击按钮时隐藏图像

Question

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

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

它工作正常，但我想在单击某个按钮时隐藏该图像如何做到这一点

我试过了

$("#" + 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();
}

请帮助隐藏图像。

提前致谢

Answer 1

.stop(1,1)应该做的伎俩！

LIVE DEMO

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