Question

我希望有人可以对一个新手极客的最新问题有所了解。

这是我微薄的小页：http://www.dogsactually.co.uk/nada_and_orla/orla.html

它有一个闪屏（正确或错误），我正在使用'Shuffle letters'jQuery插件（http://tutorialzine.com/2011/09/shuf...effect-jquery/）。

我的问题是，当飞溅完成时，'shuffle letters'已经完成了它的魔力，所以没有人能看到效果。

假设我需要一些能让一个函数在前一个函数完成时启动的东西????

这是随机播放的字母javascript：

    $(function(){

// container is the DOM element;
// userText is the textbox

var container = $("#type")
    userText = $('#userText'); 

// Shuffle the contents of container
container.shuffleLetters();

// Bind events
userText.click(function () {

  userText.val("");

}).bind('keypress',function(e){

    if(e.keyCode == 13){

        // The return key was pressed

        container.shuffleLetters({
            "text": userText.val()
        });

        userText.val("");
    }

}).hide();



    });



    (function($){

$.fn.shuffleLetters = function(prop){

    var options = $.extend({
        "step"      : 8,            // How many times should the letters be changed
        "fps"       : 25,           // Frames Per Second
        "text"      : "",           // Use this text instead of the contents
        "callback"  : function(){}  // Run once the animation is complete
    },prop)

    return this.each(function(){

        var el = $(this),
            str = "";


        // Preventing parallel animations using a flag;

        if(el.data('animated')){
            return true;
        }

        el.data('animated',true);


        if(options.text) {
            str = options.text.split('');
        }
        else {
            str = el.text().split('');
        }

        // The types array holds the type for each character;
        // Letters holds the positions of non-space characters;

        var types = [],
            letters = [];

        // Looping through all the chars of the string

        for(var i=0;i<str.length;i++){

            var ch = str[i];

            if(ch == " "){
                types[i] = "space";
                continue;
            }
            else if(/[a-z]/.test(ch)){
                types[i] = "lowerLetter";
            }
            else if(/[A-Z]/.test(ch)){
                types[i] = "upperLetter";
            }
            else {
                types[i] = "symbol";
            }

            letters.push(i);
        }

        el.html("");            

        // Self executing named function expression:

        (function shuffle(start){

            // This code is run options.fps times per second
            // and updates the contents of the page element

            var i,
                len = letters.length, 
                strCopy = str.slice(0); // Fresh copy of the string

            if(start>len){

                // The animation is complete. Updating the
                // flag and triggering the callback;

                el.data('animated',false);
                options.callback(el);
                return;
            }

            // All the work gets done here
            for(i=Math.max(start,0); i < len; i++){

                // The start argument and options.step limit
                // the characters we will be working on at once

                if( i < start+options.step){
                    // Generate a random character at thsi position
                    strCopy[letters[i]] = randomChar(types[letters[i]]);
                }
                else {
                    strCopy[letters[i]] = "";
                }
            }

            el.text(strCopy.join(""));

            setTimeout(function(){

                shuffle(start+1);

            },1000/options.fps);

        })(-options.step);


    });
};

function randomChar(type){
    var pool = "";

    if (type == "lowerLetter"){
        pool = "abcdefghijklmnopqrstuvwxyz0123456789";
    }
    else if (type == "upperLetter"){
        pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    }
    else if (type == "symbol"){
        pool = ",.?/\\(^)![]{}*&^%$#'\"";
    }

    var arr = pool.split('');
    return arr[Math.floor(Math.random()*arr.length)];
}

    })(jQuery);

这是启动的脚本：

           $(window).load(function() {
     $('#splash').fadeIn(2000, function() {
        $(this).delay(500).fadeOut(2000, function() { 
            $('#containersplash, #reelsplash').fadeIn(1000); });
           });  
    });

    $(window).load(function() {
     $('#skip').fadeOut(3500); 
    });

Answer 1

将script.js的内容放入shuffleLetters等函数中，并在启动动画后在splash.js中调用

加载一件事

1 个答案: