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);
});

このページのアニメーションをFancyTypewriterプラグインでスクリプト化しようとしています。このプラグインは、要素内のテキストを取得し、それを使用して優れたタイピングアニメーションを作成します。ただし、setTimeout関数を持つ最後の2つのdivは2回実行されます。アイデアは、1つのdivをアニメーション化し、前のdivが終了した後に次のdivをアニメーション化することです。何か案は？

4

3 に答える 3

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 に答える
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 に答える