Question

我有一个隐藏的div，我有一个运行打字机动画的jquery。我想知道如果div显示出来后我怎么能启动动画呢？在显示div时，类型已经存在。

$(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方法都有回调。假设您希望在typer的元素已经淡出后调用id="#somethingThere插件作为示例：

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

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

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

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

1 个答案: