Collection animate

eles.animate()

Animate the elements in the collection.

eles.animate( properties, options )

Animate the elements in the collection with the specified properties and options

properties : A plain object containing properties to animate
position : A position object to animate the elements to
bypass : A bypass object to animate the elements to

options : A plain object containing animation options
duration : The duration of the animation in milliseconds (default 400 ms)
complete( currentTime ) : A callback function that is called when the animation is complete
step( currentTime ) : A callback function that is called each time the animation steps
queue : A boolean indicating whether to place the specified animation in the animation queue for each element (default undefined, i.e. try to run the animation now and queue if currently animating)

Details

This function can currently animate bypass and position for elements. The same animation is applied to all elements in the collection. This function works much in the same way as jQuery.animate().

However, it is important to note that the animation queue of each element is respected: If there is a currently running animation for an element, then further animations will be placed in the element's animation queue. If options.queue is set explicitly to false, then the animation is run concurrently with other currently running animations.

The options parameter is optional, and the default options will be used when options is not specified.

Examples

Animate position:

cy.nodes().animate({
  position: { x: 100, y: 200 }
});

Animate bypass:

cy.nodes().animate({
  bypass: { fillColor: "red" }
});

Animate position and bypass at the same time with options:

cy.nodes().animate({
  position: { x: 100, y: 200 },
  bypass: { fillColor: "red" }
}, {
  duration: 2000
});