我有一个隐藏的 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});
});
任何帮助将不胜感激。谢谢!