调用隐藏Div时如何启动Jquery动画？

Question

我有一个隐藏的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});
});

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

Answer 1

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

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

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

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