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

L'exemple de cet article décrit l'algorithme d'animation utilisant la file d'attente pour simuler jquery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Aaron est récemment tombé follement amoureux de la recherche sur les algorithmes, qui va probablement coûter beaucoup de cellules cérébrales. J'aime en acheter des toutes faites pour économiser quelques efforts. J'ai trouvé un morceau de code source qu'il a écrit et c'était assez amusant de l'exécuter, alors je l'ai utilisé pour l'analyser, d'une part pour absorber les nutriments qu'il contenait, et d'autre part pour approfondir mes compétences en apprentissage du code source. On dit que ce code source est vraiment un secret pour améliorer la force interne de js. Si vous n'y croyez pas, venez le goûter avec moi.

Copier le code Le code est le suivant :

//Exécutez la fonction immédiatement, il n'y a rien à dire. Regardez la démo ci-dessous
/**
(fonction($){
//Le $ ici sera fourni par la valeur de retour de la fonction d'exécution immédiate qui suit
})(fonction(){
//Le résultat de l'exécution de cette fonction est $
Renvoyer une requête
}())

*/
(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)';

//Animation de suivi terminée

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

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

Joignez le code HTML et vous pourrez l'ajuster vous-même. N'oubliez pas d'utiliser Chrome pour naviguer.

Copier le code Le code est le suivant :

Étiquettes associées：

jquery 动画算法队列

source：php.cn

Article précédent：Comment transférer des données entre les compétences du navigateur javascript windows_javascript Article suivant：Résumé des plug-ins jQuery manuscrits DIY_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur