javascript queue 打字效果

转载于 2015-10-20 14:37:00 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/byxxw/p/4894764.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的动态加载文字到页面并带有延迟效果的示例。通过jQuery的队列(queue)和延时(delay)方法，实现了逐字符显示字符串的功能，展示了jQuery在网页动态效果制作方面的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery queue</title>
    <script src="framework/jquery-1.10.2.min.js"></script>
    <script>
        var content = "javascript is a good language!!";
        $(function(){
            function callback(){
                console.log(this);
            }

            function notify(word){
                console.log("notify:" + word);
                $("#content").append(word);
            }

            var arr = content.split(' ');

            $.each(arr,function(index,item){
                for(var i=0; i<item.length; i++) {
                    // console.log(i + " !!i = " + (!!i) + (!i));
                    (function(word){
                        $("#content").queue("dynamicStyle", function(next){
                            callback.call($(this));
                            notify(word);
                            next();
                        }).delay(200,"dynamicStyle");
                    })(item[i]);
                }
                $("#content").queue("dynamicStyle", function(next){
                            callback.call($(this));
                            notify("&nbsp;");
                            next();
                }).delay(200,"dynamicStyle");
                
            });

            

            $("#content").dequeue("dynamicStyle");
        });
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>