0

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

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

4

1 回答 1

0

显示/隐藏 jquery 方法都有回调。假设您想typer在元素id="#somethingThere淡入后调用插件作为示例：

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

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

该函数将在淡入发生后执行。

于 2013-04-16T16:12:45.697 回答