2012-04-15 137 views
0

這就是我想要完成的。 我有兩個按鈕,當我按下第一個按鈕時,它會淡出到50%,當淡出完成時,它會淡出回到100%,然後循環播放動畫,直到按下另一個按鈕,然後刪除下一個按鈕按鈕完全一樣。所以每次點擊一個按鈕時,它都會輕輕地閃爍...... 這是可行的嗎?jQuery按鈕淡入循環,直到按下另一個按鈕

我一直在玩弄這個,但只是沒有得到它的工作。

<html> 

<head> 
    <title></title> 
<style type="text/css"> 
#blnk a { cursor: pointer; } 
</style> 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 

<script language="JavaScript" type="text/javascript"> 
<!-- 
$("#blnk a img").children().click(function(){ 
      $(this).animate({"backgroundColor":""},500);}, 
    function(){ 
      $(this).animate({"backgroundColor":""},500);}); 
//--> 
</script> 
</head> 

<body> 
    <div id="blnk"><a src="#"><img src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div> 
    <div id="blnk"><a src="#"><img src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div> 
</body> 
</html> 

回答

1

我做了一個jsFiddle解決了你的問題。我相信你可以將它適應你的代碼:http://jsfiddle.net/SFYGX/2/

讓我解釋我在那裏做了什麼:點擊時,我將所有不透明度重置爲1,並停止所有的動畫,然後, m啓動一個遞歸循環來爲點擊的項目設置動畫。

(之前嘗試它,確保像你現在這樣(ID =「BLNK」),你不要使用重複的ID)

+0

天才......它的功能非常棒,超過偉大......完美! 我可以在哪裏學習如何做到這一點? – 2012-04-15 19:59:31

0

的動畫功能也可以使用一個回調。如果將動畫放入函數中,則可以使用回調再次調用該函數。在函數內部,你可以包含一個標誌,當某事發生時設置該標誌,並停止循環或調用另一個函數。

0

我的解決辦法:

的javascript:

$(function() { 
    var currentId; 
    var animate = function(obj) { 
      if (currentId == $(obj).attr('id')) $(obj).fadeTo('slow', 0.5, function() { 
       $(obj).fadeTo('slow', 1); 
       animate(obj); 
      }); 
     } 
    $(".blnk a img").click(function() { 
     currentId = $(this).attr('id'); 
     animate(this); 
    }); 
}); 

HTML:

<div class="blnk"><a src="#"><img id="img1" src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div> 
<div class="blnk"><a src="#"><img id="img2" src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div> 

CSS:

.blnk a { cursor: pointer; } ​ 

demo