I'm trying to understand more about the Cytoscape.js animate. Looking at the documentation here, if I understand that properly it should change the node color to blue over a second, wait a second, and then change the node color to yellow. However, when I hit the button to view the example it doesn't do anything.
I tried to do something similar in my own code here:
$(function() {
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'black'
}),
ready: function(){
window.cy = this;
cy.add({
group: 'nodes',
data: {name: 'test', id: '1'},
position: {x: 200, y: 100}
});
cy.nodes().animate({
style: {
'background-color': 'blue'
}
}, {
duration: 2000,
complete: function() {
console.log("Done");
}
});
}
});
});
but again the color doesn't change any.
Ultimately I'm hoping to use the animate and style to animate changing the size of a node, but I was just trying to figure out the basics of animating it and got stuck here. Thanks in advance for the help!
