单击按钮时隐藏图像

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