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