Question

我正在寻找使用jQuery为文本制作动画的方法。

我想显示'登录...'消息，其中3个点应该隐藏在页面加载上，然后每个让300毫秒1点变得可见。所有这些都应该创造动画。

是否有任何jQuery函数可以创建，或者我必须自己完成？

任何建议都非常感谢。

Answer 1

这可以通过jQuery插件很好地完成。这使它可以重复使用和配置。

这样的事情很简单。它有3个默认值，可以覆盖

文字默认为“正在加载”
numDots 在回收到零之前要计数的点数，默认为3

延迟添加新点之间的延迟。默认为300毫秒

(function($) {

$.fn.elipsesAnimation = function(options) {

    var settings = $.extend({}, { //defaults
        text: 'Loading',
        numDots: 3,
        delay: 300
    }, options);
    var currentText = "";
    var currentDots = 0;
    return this.each(function() {
        var $this = $(this);
        currentText = settings.text;
        $this.html(currentText);
        setTimeout(function() {
            addDots($this);
        }, settings.delay);
    });

    function addDots($elem) {
        if (currentDots >= settings.numDots) {
            currentDots = 0;
            currentText = settings.text;
        }
        currentText += ".";
        currentDots++;
        $elem.html(currentText);
        setTimeout(function() {
            addDots($elem);
        }, settings.delay);
    }
}

})(jQuery);

然后可以使用

// Writes "Hello World", counts  up to 10 dots with a 0.5second delay
$('#testDiv').elipsesAnimation ({text:"Hello World",numDots:10,delay:500});

一个实例：http://jsfiddle.net/6bbKk/

Answer 2

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

使用：

 $(document).ready( function() {
      //fadeIn your text, fake function for example
      FadeInMyText();

      setTimeout(function() {
        // fadeOut your text, fake function for example                           
        FadeOutMyText();
      }, 300);
 });

Answer 3

在jQuery中有延迟（毫秒，回调）函数。您可以使用回调函数来编排延迟。但是出于您的目的，javascript window setTimeout可能更合适，因为您可以在加载完成后立即运行window.clearTimeout，从而产生响应更快的UI。

一个例子：

var timeoutId;

$(document).ready( function() {
    timeoutId = window.doTextUpdate(slowAlert, 2000);   
});

function doTextUpdate() {
    var current = $("#mytext").val();
    if(current.indexOf("...")) {
        $("#mytext").val("Loading");
    } else {
        $("#mytext").val(current + ".");
    }
}

function loadComplete() {
    window.clearTimeout(timeoutId);
}

Answer 4

<script type="text/javascript" language="javascript">
$(function(){launchAnimation('#animate');});

function launchAnimation(container){
    var cont = $(container);
    var i=0;
    setInterval(function(){
        ++i;
        if (i<4){
            var dot=jQuery("<span class='dot'>.</span>").appendTo(cont);
        }
        else{
            i=0;
            cont.find('.dot').remove();
        }
    },300);
}

</script>
<div id='animate' style='border:1px solid red'>Logging in</div>

jQuery文本动画 - 文本淡入

4 个答案: