0

タイプライターアニメーションを実行するjqueryがある非表示のdivがあります。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});
 });

フェードインのドキュメントの例: http://api.jquery.com/fadeIn/

この関数は、fadeIn が発生した後に実行されます。

于 2013-04-16T16:12:45.697 に答える