隱藏圖片上的按鈕點擊

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