在jquerymobile中動畫按鈕css屬性

Question

我正在嘗試製作一個jquerymobile（v1.1.1）按鈕動畫，就像它在閃爍一樣。 這一步我已經得到了：

myButton = $('<div data-role="button" data-theme="reset" data-inline="true" >save</div>').appendTo(this.myNode); 


setInterval(
    function(){ 

     myButton.animate ({ 

      opacity: 0.5 

    }, 400, function(){ 

       myButton.animate ({ 

        opacity:1, 

      },400); 
     });},1000); 

這裏的問題是：

1. 只有data-theme="reset"我可以看到按鈕的外觀做一些修改。
2. 不透明度似乎是唯一可以修改的屬性。

理想情況下，我希望能夠爲背景顏色或按鈕文本的顏色設置動畫效果，無論它可能具有哪種數據主題。有什麼建議麼？

編輯：如果它的任何幫助，由jquerymobile生成按鈕的HTML如下：

<div data-role="button" data-theme="reset" data-corners="true" data-shadow="true" 
data-iconshadow="true" data-wrapperels="span" 
class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-reset"> 
     <span class="ui-btn-inner ui-btn-corner-all"> 
      <span class="ui-btn-text">save</span> 
     </span> 
</div> 

Answer 1

您可以使用CSS3過渡（支持大多數的移動瀏覽器，http://caniuse.com/#feat=css-transitions）創建動畫的顏色。

JS-

$(function() { 

    //save current color so we can go between two colors 
    var currentColor = "red"; 

    //set an interval 
    setInterval(function() { 
     var $this = $('a'); 

     //swap colors (background and text) 
     if (currentColor === "red") { 
      currentColor = "blue"; 
      $this.css({ 
       backgroundColor : "blue", 
       color   : "white" 
      }); 
     } else { 
      currentColor = "red"; 
      $this.css({ 
       backgroundColor : "red", 
       color   : "black" 
      }); 
     } 
    }, 2500); 
});​ 

CSS-

.ui-page .ui-btn { 
    background-image : none; 

    -webkit-transition : background-color 2s linear, color 2s linear; 
    -moz-transition : background-color 2s linear, color 2s linear; 
    -ms-transition  : background-color 2s linear, color 2s linear; 
    -o-transition  : background-color 2s linear, color 2s linear; 
    transition   : background-color 2s linear, color 2s linear; 
}​ 

這裏是一個演示：http://jsfiddle.net/yLuCt/

CSS的上面從按鈕刪除梯度的背景圖像，以便它們的平面彩色背景將使用（可以通過CSS動畫）。然後transition聲明只是定義什麼類型的動畫用於什麼屬性以及動畫的最後持續時間。我已經將動畫設置爲比時間間隔短一些，所以元素並不總是動畫。

文檔的轉換：https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FCSS_transitions

的轉換瀏覽器支持：http://caniuse.com/#feat=css-transitions