在jquerymobile中设置按钮css属性的动画

animating button css properties in jquerymobile

本文关键字：属性 动画 css 按钮 jquerymobile 设置      更新时间：2023-09-26

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

您可以使用CSS3转换（在大多数移动浏览器上都支持，http://caniuse.com/#feat=css-过渡）来创建颜色的动画。

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-美国&重定向段塞=CSS%2FCS_transitions

浏览器对转换的支持：http://caniuse.com/#feat=css-转换

相关文章：