1 
$(document).ready(function(){
    $('#home-buzz-1').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});

    setTimeout("$('#home-buzz-2').css('display','inline');$('#home-buzz-2').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});",3000);

    setTimeout("$('#home-buzz-3').css('display','inline');$('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});",4500);
});

我正在尝试使用 Fancy Typewriter 插件在此页面上编写动画脚本 - 该插件将文本放入元素中，并使用它制作漂亮的打字动画。但是最后两个具有 setTimeout 函数的 div 运行两次。这个想法是我希望一个 div 动画，然后在前一个完成后下一个动画。有任何想法吗？

4

3 回答 3

0

你不应该将字符串传递给 setTimeout 函数，试试这个：

$(document).ready(function(){
    $('#home-buzz-1').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});

    setTimeout(function(){
        $('#home-buzz-2').css('display','inline');
        $('#home-buzz-2').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});}
    ,3000);

    setTimeout(function(){
        $('#home-buzz-3').css('display','inline');
        $('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});}
    ,4500);
});
于 2012-09-11T14:37:58.293 回答
0

@zzzzBov 是对的，JS 是一种函数式语言：

setTimeout(function()
{
    $('#home-buzz-3').css('display','inline');
    $('#home-buzz-3').fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true});
},4500);

所以 setTimout 期望传递一个函数，而不是字符串常量。它与 < 几乎相同$(document).ready(function(){});——您一直将函数作为参数传递。

于 2012-09-11T14:38:49.727 回答
0

不需要 setTimeouts，插件在完成时有一个回调。

$(function(){
    function addTypeWriter(elemId) {  //You copy pasted the same thing over and over, make a helper function!
        jQuery(elemId).show().fancyTypewriter({type:true, steps:3, timeBetweenSteps:25, 'mouseOver': false, underScore:true, callback: nextOne});
    }  //chaining does the body good. Notice the callback, read the docs!
    var typewriters = ["#home-buzz-1","#home-buzz-2","#home-buzz-3"];  //elements you want to apply the effect to in sequential order
    function nextOne() {  //this is what we call
        if(typewriters.length==0) {  //if length is greater than zero, we have things to run!
            return;
        }
        var elem = typewriters.shift();  //remove first item from the array
        addTypeWriter(elem);  //fire off the annimation
    }
    nextOne(); //start it off
});
于 2012-09-11T14:44:03.453 回答