Utiliser la file d'attente pour simuler l'algorithme d'animation jquery example_jquery

*/
(fonction ($) {
​ fenêtre.$ = $;
})(fonction() {

//Utilisé pour correspondre à la chaîne d'identification
//(? : N'indique aucun regroupement ici), reportez-vous au contenu régulier
//Mais personnellement, je pense qu'il serait préférable de remplacer * par un signe, car il doit y avoir au moins un caractère après #
var rquickExpr = /^(?:#([w-]*))$/;
//À première vue, c'est un patient sévère de jquery
Fonction aQuery(sélecteur) {
           renvoie le nouveau aQuery.fn.init(selector);
>

/**
*Animations
* @return {[type]} [description]
​​*/
var animation = fonction() {

var soi = {};
        var Queue = []; //File d'attente d'animation
        var shooting = false //Verrouillage de l'animation
        var first = true ; //Déclenché via l'ajout d'une interface

var getStyle = function(obj, attr) {
                  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
>
//Ce sont tous des effets d'animation spécifiques, il n'y a rien de difficile à comprendre
        var makeAnim = function(element, options, func) {
            var width = options.width
                                                                                                                                                                                                                         implémenté pour ’ ’ ’ ’                                               //css3
                          //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
>

var _fire = fonction() {
//L'animation ajoutée est en cours de déclenchement
                si (!fireing) {
            var onceRun = Queue.shift();
                     if (onceRun) {
//Empêcher les déclenchements répétés
                    tir = vrai ;
                            //suivant
                     onceRun(function() {
feu = faux ;
//L'effet des appels en série est très intelligemment produit ici
                        _fire();
                     });
                     } autre {
                    tir = vrai ;
                }
            }
>

retour soi = {
//Ajouter une file d'attente
               ajouter : fonction (élément, options) {
//Voici la clé de tout l'algorithme
//Équivalent à l'ajout d'une fonction au tableau
//[fonction(func){},...]
                              // Il s'agit de la méthode onceRun dans _fire, et func a été transmise à ce moment-là.
                               // Aaron aime utiliser cette technique dans sa programmation, comme la pré-compilation, etc.
File d'attente.push(function(func) {
                         makeAnim(element, options, func);
                });

//S'il y a une file d'attente, déclenchez l'animation immédiatement
Si (premier && Queue.length) {
//Ce commutateur joue un très bon rôle dans le contrôle de la file d'attente des éléments ajoutés ultérieurement
                      1er = faux ;
//Cela équivaut à exécuter _fire();
directement // Aaron aime installer A, ajouter délibérément un self.fire, peut-être qu'il est clairvoyant
                        self.fire();
                }
            },
//Déclencheur
Feu : fonction() {
                   _fire();
            }
>
}();

aQuery.fn = aQuery.prototype = {
         exécuter : fonction (options) {
animation.add(this.element, options);
              renvoyez ceci ;
>
>

var init = aQuery.fn.init = function(sélecteur) {
        var match = rquickExpr.exec(selector);
         var element = document.getElementById(match[1])
This.element = element;
         renvoie ceci ;
>
//J'ai presque sous-estimé cette ligne de code
//J'ai bien appris à utiliser jquery
//N'est-il pas préférable de directement aQuery.fn.init = aQuery.fn ?
//Une variable d'initialisation supplémentaire sert juste à réduire les requêtes, l'idée d'optimisation est partout.
init.prototype = aQuery.fn;
Renvoie une requête ;
}());

//dom
var oDiv = document.getElementById('div1');

//Appeler
oDiv.onclick = function() {

$('#div1').run({
         'largeur' : '500'
}).run({
        'largeur' : '300'
}).run({
        'largeur' : '1000'
});
};