7

必要なもの:

アニメーション化された省略記号 (...) が必要で、1 つのドットが次々に表示されます。アニメーションはループする必要があります。jQueryで実現したい

アニメーション シーケンス:

フレーム 1:選択待ち

フレーム 2:選択を待っています。

フレーム 3:選択待ち..

フレーム 4:選択を待っています ...

私が試したこと：

テキストと脈動する .effect()を点滅させるプラグインを研究しています。

私の質問：

これを達成するための最も簡単で信頼性の高い手段について、誰かに推奨事項はありますか? テクニックや機能を指摘していただければ幸いです。

4

4 に答える 4

17

ドットを 1 回だけ連続して表示する必要がある場合は、次のような非常に簡単なことを試してください。

<div id="message">Awaiting your selection</div>​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#message').append('.');
        dots++;
    }
}​

http://jsfiddle.net/fVACg/

それらを複数回表示する (削除してから再印刷する) 場合は、次のようにすることができます。

<div>Awaiting your selection<span id="dots"></span></div>​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#dots').append('.');
        dots++;
    } else {
        $('#dots').html('');
        dots = 0;
    }
}​

http://jsfiddle.net/wdVh8/

最後に、私が数年前に書いたチュートリアルをチェックしてください。役に立つかもしれません。

于 2012-10-21T10:17:41.750 に答える
17

jquery を使用した StathisG の回答のほかに、アニメーションの反復回数とアニメーションの遅延を使用して、CSS3 で達成することもできます。 

@-webkit-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#loading {
    text-align: center; 
    margin: 100px 0 0 0;
}

#loading span {
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: opacity;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
}

#loading span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
}

#loading span:nth-child(2) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
}

#loading span:nth-child(3) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
}​

デモ: http://jsfiddle.net/VXdhG/1/

于 2012-10-21T10:25:04.173 に答える
1

そのための簡単な JQuery プラグインを作成しました: https://github.com/karbachinsky/jquery-DotAnimation

//<div class="element">Loading</div>

$(function () {
    // Animation will start at once
    var $el = $('.element');

    $el.dotAnimation({
        speed: 300,
        dotElement: '.',
        numDots: 3
    });
});

JSFiddle の例: https://jsfiddle.net/bcz8v136/

于 2015-09-18T09:32:09.887 に答える
0

次のコードは、本質的に私が最終的に得たものです。

JavaScript: 

var animatedDot;
animatedDot = animatedDot || (function () {
    var dots = 0;
    var animatedDotInterval;
    var selectorAnimatedDot = ".animatedDot";

    return {
        start: function(interval) {
            if (!interval)
                interval = 400;

            animatedDotInterval = setInterval(this.nextFrame, interval);
        },
        stop: function() {
            if (animatedDotInterval)
                clearInterval(animatedDotInterval);
        },
        nextFrame: function() {
            if ($(selectorAnimatedDot).length) {
                if (dots < 3) {
                    $(selectorAnimatedDot).append('.');
                    dots++;
                } else {
                    $(selectorAnimatedDot).html('');
                    dots = 0;
                }
            } else {
                if (animatedDotInterval)
                    clearInterval(animatedDotInterval);
            }
        }
    };
})();

function animatedDotTimeout(timeout) {
    if (!timeout)
        timeout = 10000;

    animatedDot.start();

    setTimeout(animatedDot.stop, timeout);
}

HTML: 

Loading<span class="animatedDot"></span>

<script type="text/javascript">
    $(document).ready(function() {
        animatedDot.start();
    });
</script>
于 2014-10-31T11:36:03.713 に答える