<!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 打字效果的更多相关文章

  1. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

  2. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

  3. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  5. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  6. canvas打字效果

    运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...

  7. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  8. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  9. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. 人工智能-baidu-aip语音合成(文字转语音)

    from aip import AipSpeech APP_ID = ' APP_KEY = 'DhXGtWHYMujMVZZGRI3a7rzb' SECRET_KEY = 'PbyUvTL31fIm ...

  2. http请求设置setConnectTimeout()方法超时无响应

    相信非常多小伙伴在写 HttpURLConnection中都设置了setConnectTimeout()方法.目的就是在网络不好的情况下超时返回 然而我们设置的setConnectTimeout()并 ...

  3. DOM 属性操作

    1 属性节点 2 attribute操作 3 value获取值操作 4 class的操作 5 指定CSS操作 1.属性节点 //获取文本节点的值 var divEle = document.getEl ...

  4. vue增删改查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. MDF损坏或LDF文件损坏

    MDF损坏或LDF损坏 MDF丢失或LDF丢失 注意,这些情况必须要相同版本的sql server才能操作成功 当MDF损坏时 1.备份结尾日志 http://www.cnblogs.com/gere ...

  6. open-falcon 前端代码在windows上运行

    1: 下载代码git clone https://github.com/open-falcon/dashboard.git 2:在代码\dashboard-0.2.0 的根目录下安装 python虚拟 ...

  7. 深度学习：Keras入门(一)之基础篇（转）

    转自http://www.cnblogs.com/lc1217/p/7132364.html 1.关于Keras 1)简介 Keras是由纯python编写的基于theano/tensorflow的深 ...

  8. Oracle学习笔记—数据字典和常用命令（转载）

    转载自: oracle常用数据字典和SQL语句总结 Oracle常用命令大全(很有用,做笔记) 一.Oracle数据字典 数据字典是Oracle存放有关数据库信息的地方,其用途是用来描述数据的.比如一 ...

  9. IBM的SOA方法论之一——五个切入点和八个场景

    一.什么是SOA: 面向服务的体系结构(Service-Oriented Architecture,SOA)是一种 IT 体系结构风格,支持将您的业务转换为一组相互链接的服务或可重复业务任务,可在需要 ...

  10. $git学习总结系列（1）——基本用法

    廖雪峰的官方网站:http://www.liaoxuefeng.com/ 本文是学习廖雪峰的官方网站上git教程git基本用法的总结,详细内容可以进入廖雪峰的官方网站查看. 注:本文中的主要内容都是基 ...