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 に答える