JQuery synchrone animation

jQuery ne peut pas faire synchrone animations.

Rappelez-vous que le JavaScript s'exécute sur le navigateur du thread d'INTERFACE utilisateur.

Si vous faites une synchrone de l'animation, le navigateur va geler jusqu'à ce que l'animation se termine.

Pourquoi avez-vous besoin de faire cela?

Vous devriez probablement utiliser jQuery rappel du paramètre et continuer votre code de la méthode dans le rappel, comme ceci:

function doSomething() {
    var thingy = whatever;
    //Do things
    $('something').animate({ width: 70 }, function() {
        //jQuery will call this method after the animation finishes.
        //You can continue your code here.
        //You can even access variables from the outer function
        thingy = thingy.fiddle;
    });
}

Cela s'appelle une fermeture.

jQuery fournit une "étape" de rappel pour ses .animate() de la méthode. Vous pouvez accrocher dans cette pour faire synchrone animations:

jQuery('#blat').animate({
  //CSS to change
  height: '0px'
},
{
  duration: 2000,
  step: function _stepCallback(now,opts) {
    //Stop browser rounding errors for bounding DOM values (width, height, margin, etc.)
    now = opts.now = Math.round(now);

    //Manipulate the width/height of other elements as 'blat' is animated
    jQuery('#foo').css({height: now+'px'});
    jQuery('#bar').css({width: now+'px'});
  },
  complete: function _completeCallback() {
    //Do some other animations when finished...
  }
}

Ici est un module j'ai mis en place un temps, afin de l'aider dans l'exécution des animations de manière séquentielle.

Utilisation:

var seq = [
    { id: '#someelement', property:'opacity', initial: '0.0', value:'1.0', duration:500 },
    { id: '#somethingelse', property:'opacity', value:'1.0', duration: 500 }
];

Sequencer.runSequence(seq);

---

var Sequencer = (function($) {
var _api = {},
_seq = {},
_seqCount = 0,
_seqCallback = {};
function doAnimation(count, step) {
var data = _seq[count][step],
props = {};
props[data.property] = data.value
$(data.id).animate(props, data.duration, function() {
if (step+1 < _seq[count].length) {
doAnimation(count, ++step);
} else {
if (typeof _seqCallback[count] === "function") {
_seqCallback[count]();
}
}
});
}
_api.buildSequence = function(id, property, initial, steps) {
var newSeq = [],
step = {
id: id,
property: property,
initial: initial
};
$.each(steps, function(idx, s) {
step = {};
if (idx == 0) {
step.initial = initial;
}
step.id = id;
step.property = property;
step.value = s.value;
step.duration = s.duration;
newSeq.push(step);
});
return newSeq;
}
_api.initSequence = function (seq) {
$.each(seq, function(idx, s) {              
if (s.initial !== undefined) {
var prop = {};
prop[s.property] = s.initial;
$(s.id).css(prop);
}            
});
}
_api.initSequences = function () {
$.each(arguments, function(i, seq) {
_api.initSequence(seq);
});
}
_api.runSequence = function (seq, callback) {
//if (typeof seq === "function") return;
_seq[_seqCount] = [];
_seqCallback[_seqCount] = callback;
$.each(seq, function(idx, s) {
_seq[_seqCount].push(s);
if (s.initial !== undefined) {
var prop = {};
prop[s.property] = s.initial;
$(s.id).css(prop);
}
});
doAnimation(_seqCount, 0);
_seqCount += 1;
}
_api.runSequences = function() {
var i = 0.
args = arguments,
runNext = function() {
if (i+1 < args.length) {
i++;
if (typeof args[i] === "function") {
args[i]();
runNext();
} else {
_api.runSequence(args[i], function() {
runNext();
});
}
}
};
//first we need to set the initial values of all sequences that specify them
$.each(arguments, function(idx, seq) {
if (typeof seq !== "function") {
$.each(seq, function(idx2, seq2) {
if (seq2.initial !== undefined) {
var prop = {};
prop[seq2.property] = seq2.initial;
$(seq2.id).css(prop);
}
});
}
});
_api.runSequence(arguments[i], function (){
runNext();
});
}
return _api;
}(jQuery));

Je suis tombé sur ce http://lab.gracecode.com/motion/
Vraiment facile à utiliser et fonctionne très bien en combinaison avec jquery.

MODIFIER
Les liens semble morte. Si j'ai suivi le sentier de ceux que l'archive wayback correctement, le code est à https://github.com/feelinglucky/motion