javascript queue 打字效果 

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

 

posted @ 2015-10-20 14:37  不要相信我  阅读(187)  评论(0)    收藏  举报