我有一个隐藏的 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});
});
如有任何帮助，我们将不胜感激。 谢谢!
最佳答案
显示/隐藏 jquery 方法都有回调。假设您想在带有 id="#somethingThere 的元素淡入之后调用 typer 插件作为示例:
$('#somethingThere').fadeIn(100, function() {
$('div').typer({speed:25});
});
淡入文档示例:http://api.jquery.com/fadeIn/
函数将在淡入发生后执行。
关于jquery - 如何在调用隐藏div时启动jquery动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16041954/