Cacher is the code snippet organizer for pro developers

$(function () {

    // 1 by QUEUE
    // $.each([$('#fade-el-1'), $('#fade-el-2'), $('#fade-el-3'), $('#fade-el-4')], function () {
    //     var $this = this;
    //     $(document).queue('text-animate', function (next) {
    //         animateText($this, next);
    //     });
    // });

    // $(document).dequeue('text-animate');


    // BY MY OWN QUEUE LOGIC
    var objectsToAnimate = [];
    $('.hidden-fade').each(function () {
        objectsToAnimate.push($(this));
        
    });

    animate(objectsToAnimate, finished);
    //animate([$('#fade-el-1'), $('#fade-el-2'), $('#fade-el-3'), $('#fade-el-4')], finished);

    function finished() {
        //console.log('Finished');
    }
    
    function animate(list, callback) {
        if (list.length === 0) {
            callback();
            return;
        }
        $el = list.shift();

        animateText($el, function () {
            animate(list, callback);
        });

    }


    function animateText($element, $callback) {

        var $this = $element;
        var $wordList = $this.text().split("");
        $this.text("");
        $this.css('opacity', 1);

        $.each($wordList, function (idx, elem) {
            var newEL = $("<span/>").text(elem).css({
                opacity: 0
            });
            newEL.appendTo($this);
            newEL.delay(idx * 125);
            newEL.animate({
                opacity: 1
            }, 500, 'swing', function () {
                if ($wordList.length === idx + 1) {
                    $callback();
                }
            });
        });

        
    };
    

    
  });

        // funkcni
        // $.when(animate()).then(function()
        // {
        //     console.log('DONE');
            
        // });

        // funkcni
        // animate().then(function()
        // {
        //     console.log('DONE');
            
        // });

        function animate($callback)
        {
            return $.Deferred(function(dfd) {
        
                var $this = $('h2');
                var $wordList = $this.text().split("");
                $this.text("");
                $this.css('opacity', 1);
        
                $.each($wordList, function (idx, elem) {
                    var newEL = $("<span/>").text(elem).css({
                        opacity: 0
                    });

                    newEL.appendTo($this);
                    newEL.delay(idx * 125);
                    newEL.animate({
                        opacity: 1
                    }, 500, 'swing', function() {
                        if ($wordList.length === idx + 1)
                        {
                            dfd.resolve();
                        }
                    });
                });

        }).promise();

    }

        function animate($callback)
        {
            var dfd = $.Deferred();
    
            var $this = $('h2');
            var $wordList = $this.text().split("");
            $this.text("");
    
            $.each($wordList, function (idx, elem) {
                var newEL = $("<span/>").text(elem).css({
                    opacity: 0
                });

                newEL.appendTo($this);
                newEL.delay(idx * 125);
                newEL.animate({
                    opacity: 1
                }, 500, 'swing', function() {
                    if ($wordList.length === idx + 1)
                    {
                        dfd.resolve();
                    }
                });
            });

        return dfd.promise();
    }

        animate().done(function(){
            console.log('DONE');
            
        });

        function animate($callback)
        {
           
        
                var $this = $('h2');
                var $wordList = $this.text().split("");
                
                $wordList = $.map($wordList, function(i, v){
                    return '<span>' + i + '</span>';
                });
                $this.html($wordList);


                var promise =  $this.children('span').each(function(idx) {
                    
                    
                    var newEL = $(this);
                    newEL.css('opacity', 0);

                    newEL.delay(idx * 125);
                    newEL.animate({
                        opacity: 1
                    }, 500, 'swing');

                }).promise();

                return promise;

        }