1

我正在尝试制作一个 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>
4

1 回答 1

2

您可以使用 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

于 2012-09-05T16:22:25.500 回答