我有一个隐藏的div,其中有一个运行打字机动画的jquery。 我想知道一旦显示div就如何开始播放动画? 在显示div的时刻,类型已经存在。

这实际上是现在正在发生的事情http://jsfiddle.net/caW8d/

$(document).ready(function()                         
/*-----------------FADE EFFECT --------------------*/
    {   var synopsis = $('#synopsis');
function runIt() {
   synopsis.animate({opacity:'+=1'}, 1000);
   synopsis.animate({opacity:'-=0.9'}, 2000, runIt).delay(2000);
}
       runIt(); 

    $("#trigger1").mouseover(function () {
   $("#somethingThere").fadeIn('slow');
});
    $("#trigger1").mouseout(function() {
    $("#somethingThere").fadeOut('slow');
});
    $("#trigger1").click(function () {
   $("#caption").fadeIn('slow');
});
    $("#caption").click(function () {
   $("#caption").hide();
});

/*-----------------TYPERWRITER EFFECT --------------------*/    
      $.fn.typer = function(options) {
        var defaults = {speed: 50},
            settings = $.extend({}, defaults, options);
        return this.each(function(e,options){
            var el = $(this), 
                text = el.html(), 
                chars = 0, 
                timeout = null, 
                tw = function() {
                    el.html(text.substr(0, chars));
                    chars += 1;
                    timeout = setTimeout(function(){tw();}, settings.speed);
                    if(text.length === chars){clearTimeout(timeout);}
                };

            el.html("");
            tw();
        });
    };

})(jQuery);

$(function(){
    $('div').typer({speed:25});

    });

这是动画的外观,如下所示: http://jsfiddle.net/yMYgZ/

(function($) {
    $.fn.typer = function(options) {
        var defaults = {speed: 50},
            settings = $.extend({}, defaults, options);
        return this.each(function(e,options){
            var el = $(this), 
                text = el.html(), 
                chars = 0, 
                timeout = null, 
                tw = function() {
                    el.html(text.substr(0, chars));
                    chars += 1;
                    timeout = setTimeout(function(){tw();}, settings.speed);
                    if(text.length === chars){clearTimeout(timeout);}
                };

            el.html("");
            tw();
        });
    };

})(jQuery);

$(function(){
    $('div').typer({speed:25});
});

任何帮助将不胜感激。 谢谢!

===============>>#1 票数:0

显示/隐藏jquery方法都具有回调。 假设您要在id="#somethingThere的元素出现后淡出一个例子,然后调用typer插件:

 $('#somethingThere').fadeIn(100, function() {
    $('div').typer({speed:25});
 });

FadeIn的文档示例: http ://api.jquery.com/fadeIn/

该函数将在fadeIn发生后执行。

  ask by Greg translate from so

未解决问题?本站智能推荐:

2回复

使用jQuery隐藏带有动画的div

这是我的代码...问题是当我单击第一个div时它会动画(180度)然后消失...我想要的是,当我单击第一个div时它会消失而没有动画,而第二个div会出现动画。 。当我单击第二个div时,它也消失了,没有动画,而第三个div出现了动画。 请检查我卡在其中的代码... HTML
6回复

使用Jquery UI动画功能显示/隐藏子元素时,父div在没有动画的情况下变得更宽

我有一个问题,当我尝试使用jquery动画显示/隐藏div元素时,它平滑打开,但是其父对象却不平滑地打开。 隐藏也会发生同样的情况。 因此,我的整个页面内容都是一个混蛋。 演示: http : //jsfiddle.net/neDZP/7/ HTML: 使用Javas
4回复

使用jQuery重新启动已经隐藏且透明的动画

我有一个CSS动画,它同时从可见变为隐藏,从实体变为透明。 我的问题是,这是一个动画,单击按钮时需要显示它。 当实际的隐藏和淡入由CSS而不是jQuery执行时,如何在点击时触发事件? 例如,当单击Div'One'时,我希望覆盖播放一次。 单击其他div时相同。 我似乎无法解决问题,帮
3回复

jQuery - 在开始时查找div的底部,而不是在悬停时的动画期间

我正在使用'shelf-info-text'类找到每个div的CSS值'bottom'。 这些div中的每一个都在货架内。 底部值使用其他功能自动计算。 在悬停时我希望通过动画将底部更改为0px,然后恢复到原始底部。 每个div都有不同的底部。 我添加了一些代码来查找底部,但是
2回复

如何使用“ animate.css”和jQuery对隐藏的div进行动画显示?

我一直在互联网上四处逛逛,但找不到任何东西。 我的目标是显示div#manis: CSS: ..通过在animate.css插件中使用动画。 我该如何解决? 任何帮助将非常感激!
1回复

jQuery和CSS动画-调用setTimeout重复动画时出现错误

我有一个动画,可以在这里查看: https : //rimildeyjsr.github.io/st.anthony/#administration_page 校长和副校长的消息交替淡入和淡出,并且在完成后,我调用setTimeout在每16秒后循环播放一次动画。 我第一次调用该动画
2回复

滚动jquery动画缺少div

我得到了一个指向'第2步'的scrool动画,但动画一直到'第3步'。 虽然我对第3步的链接似乎使用相同的功能。 我无法弄清楚为什么它不会停在正确的div,谢谢你的帮助! 这是我的代码:
2回复

动画div到li元素jquery

各位大家好,我不明白我怎么能将“div”动画为“li”元素我有水平列表,我需要动画我的箭头点击元素。 这是我的小提琴 。
1回复

jQuery的切换div动画

我早些时候问过这个问题,并提供了一些代码,但是当我将它放在div的内部时,由于该网站是结构化的,因此它无法工作,因此我在这里重试。 这是页面的格式。 http://jsfiddle.net/4FMGG/2/ 我基本上是想复制http://mitchell-me.com/上的s
1回复

使用jQuery单击另一个div时,“消除”无限CSS旋转动画

我正在尝试使用jquery将持续旋转的div(使用CSS动画)带到单击另一个div时缓慢平稳的停止。 我一直在尝试将“动画计时功能”属性从“线性”更改为“缓和”,但它只是突然停止,而不是我想要的缓慢停止。 HTML jQuery的 CSS 这是基本概念的小提琴