JQuery синхронная анимация

Question

Во многих случаях я хочу, чтобы анимация выполнялась синхронно. Особенно, когда я хочу сделать серию последовательных анимаций.

Есть ли простой способ сделать jQuery animate вызов функции синхронный?

Единственный способ, которым я думал, - установить флаг true, когда анимация закончена, и ждать этого флага.

Answer 1

jQuery не может выполнять синхронную анимацию.

Помните, что JavaScript работает под управлением пользовательского интерфейса браузера.

Если вы сделаете синхронную анимацию, браузер замерзнет, ​​пока анимация не закончится.

Зачем вам это нужно?

Вы, вероятно, следует использовать параметр обратного вызова JQuery и продолжить свой код метода в функции обратного вызова, например:

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

Это называется замыкание.

Answer 2

Я согласен с @SLaks на этом. Вы должны использовать обратные вызовы jQuery для данных анимаций для создания вашей синхронной анимации. Вы можете существенно взять все, что у вас есть для текущей анимации и разбить его так:

$yourClass = $('.yourClass'); 
$yourClass.animate({ 
    width: "70%" 
}, 'slow', null, function() { 
    $yourClass.animate({ 
     opacity: 0.4 
    }, 'slow', null, function() { 
     $yourClass.animate({ 
      borderWidth: "10px" 
     }); 
    }); 
}); 

Answer 3

JQuery обеспечивает «шаг» обратного вызова для его .animate() метод. Вы можете подключить в это делать синхронные анимации:

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... 
    } 
} 

Answer 4

Я думаю, вы должны взглянуть на метод JQuery queue().

Не только объяснение документа queue(), так как jQuery не блокирует пользовательский интерфейс и фактически ставит их в очередь друг за другом.

Она также обеспечивает способ сделать анимацию и вызовы функций последовательного (это мое лучшее понимание того, что вы имеете в виду под «синхронном»), например:

$("#myThrobber") 
    .show("slow")     // provide user feedback 
    .queue(myNotAnimatedMethod) // do some heavy duty processing 
    .hide("slow");    // provide user feedback (job's 

myNotAnimatedMethod() { // or animated, just whatever you want anyhow... 
    // do stuff 
    // ... 

    // tells #myThrobber's ("this") queue your method "returns", 
    // and the next method in the queue (the "hide" animation) can be processed 
    $(this).dequeue(); 

    // do more stuff here that needs not be sequentially done *before* hide() 
    // 
} 

Это, конечно, перебор с асинхронной обработкой; но если ваш метод на самом деле является простым старым синхронным javascript-методом, это может быть способ сделать это.

Надеется, что это помогает, и жаль моей бедному английский ...

Answer 5

Я наткнулся на этом http://lab.gracecode.com/motion/ очень прост в использовании и отлично работаю в сочетании с JQuery.

EDIT Соединения, кажется, мертвы. Если я правильно выполнил этот путь, то код находится в https://github.com/feelinglucky/motion

Answer 6

jQuery может создавать синхронные анимации.Проверьте это:

function DoAnimations(){ 
    $(function(){ 
    $("#myDiv").stop().animate({ width: 70 }, 500); 
    $("#myDiv2").stop().animate({ width: 100 }, 500); 
    }); 
} 

Answer 7

Вот модуль, который я собрал некоторое время назад, чтобы помочь в выполнении анимаций последовательно.

Использование:

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