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

这里的问题是：

只有使用data-theme="reset"我才能看到按钮外观的一些修改。
Opacity似乎是唯一可以修改的属性。

理想情况下，我希望能够为按钮的背景颜色或文本颜色设置动画，无论它可能具有什么数据主题。有什么建议吗？

编辑：如果有任何帮助，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

jquerymobile中的动画按钮css属性

1 个答案: