Changing animation easing features in jQuery queue

Question

I have an animation related to the scroll position. Whenever the user scrolls up or down, the animation starts for that position to move the item in the viewport. If the user scrolls further, these animations must queue for the element to move smoothly along the path.

var target = getAnimation(); var props = { left: [target.x, target.easing], top: target.y }; $("#ball").animate(props, 400, "easeInOutQuad"); 

The problem is that when several animations get in line, the ball slows down and accelerates. I would like to do something like this:

 var target = getAnimation(); var props = { left: [target.x, target.easing], top: target.y }; var ball = $("#ball"), queue = ball.queue(); if(ball.queue().length) { for(var i = 1, len = queue.length; i < len; i++) { //modify all the other queued animations to use linear easing } ball.animate(props, 400, "easeOutQuad"); } else { ball.animate(props, 400, "easeInQuad"); } 

Starting with the easeIn function, using linear in the middle and easyOut, in the end I get a much smoother animation. Is there anyway I can access and change the animation in the queue?

Edit:

Here is a fiddle to demonstrate what I'm trying to achieve: https://jsfiddle.net/reesewill/mtepvguw/

I use linear attenuation in the violin, but I would really like the overall affect to be more like easeInOutQuad. However, since I enable the queue, I cannot just apply this attenuation function without triggering the whole effect (change the linear mode to easyInOutQuad and press the queue button several times to see). So I need something like the above to create a general impression of easeInOutQuad.

Answer 1

Note $(selector) . queue () returns a reference to the animation queue, Array . This link can be modified using standard array methods. See also . Dequeue () .

Try using

Array.prototype.splice ()

Summary

The splice () method changes the contents of an array to delete existing elements and / or add new elements.

Syntax

array.splice (start, deleteCount [, item1 [, item2 [, ...]]]) Parameters

to begin

The index from which to start modifying the array. If greater than the length of the array, the actual starting index will be set to the length of the array. If negative, start with the fact that many elements from the end.

deleteCount

An integer indicating the number of old elements in the Delete array. If deleteCount is 0, items are not deleted. In this case, you must specify at least one new element. If deleteCount is greater than the number of elements remaining in the array, starting from the beginning, then all elements at the end of the array will be deleted.

itemN

Element to add to the array. If you did not specify any elements, splice () will only remove elements from the array.

Returns

An array containing deleted items. If only one element is deleted, an array of one element is returned. If no elements are deleted, an empty array is returned.

See also Array.prototype.concat ()

---

 var elem = $("body") , msg = function() { return "<br />" + "queue length:" + $(this).queue("abc").length }; elem.queue("abc", [ function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() } ]); elem.append(msg.call(elem)); // do stuff, // replace `function` within `abc` queue, // change `easing` options within replacement function elem.queue("abc").splice(1, 1, function(next) { $(this).append("<br />" + "`function` at index `1` within `abc` queue " + "replaced with new `function`" + msg.call(this)); next() }); elem.append("<br />" + "after `.splice()` , before `.concat()`" + msg.call(elem)); // do stuff, // `concat` functions onto `abc` queue` var arr = elem.queue("abc").concat( function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function() { $(this).append(msg.call(this) + "<br />" + "done"); } ); elem.queue("abc", arr); elem.append("<br />" + "after `.concat()`" + msg.call(elem)); elem.dequeue("abc"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 

Answer 2

I tried, you can do this with creating a new (reordered) queue

download source code http://api.jquery.com/queue/
Example. Define a queue array to delete the queue.

and replace the initial event with mine, his work.

But the functions in the queue are stored in an array of functions. You need to know the order of the original animation queue that you want to change: (Or you can create a new optimized queue.

 $( "#start" ).click(function() { $( "div" ) .show( "slow" ) .animate({ left: "+=50" }, 5000 ) .animate({ top: "+=50" }, 5000 ) .queue(function() { $( this ).addClass( "newcolor" ).dequeue(); }) .animate({ left: '-=50' }, 1500 ) .queue(function() { $( this ).removeClass( "newcolor" ).dequeue(); }) .slideUp(); // get current queue var currQueue = $( "div" ).queue( "fx"); // create new queue and change order or add/remove animations var newQueue = []; newQueue.push(currQueue[1]); newQueue.push(currQueue[3]); // changed newQueue.push(currQueue[2]); // changed newQueue.push(currQueue[5]); // set new queue to element $("div").queue("fx", newQueue); console.log($("div").queue("fx")); }); 

more details are in the jquery documentation

.queue ([queueName], newQueue)
Description: Manipulate the queue of functions performed, once for each agreed item.

important - second parameter newQueue

I hope this helps