码迷,mamicode.com
首页 > 编程语言 > 详细

javascript queue 打字效果

时间:2015-10-20 15:14:05      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

javascript queue 打字效果

标签:

原文地址:http://www.cnblogs.com/byxxw/p/4894764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!