javascript - offset not changing after jQuery animation -

-

http://plnkr.co/edit/c6oaitttvlhltk7b3muf?p=preview

i'm working on jquery animation , need have animated divs retain new offset after animation ends.

the goal of animation able click on 1 of smaller circles @ bottom , swap places/size larger circle @ top.

function leadershiptoshow(id) {   console.log('leadershiptoshow (' + id + ')');   var x = $('.activeleadership').offset().left;   var y = $('.activeleadership').offset().top;   var h = $('.activeleadership').height();   var w = $('.activeleadership').width();   if($(id).hasclass('activeleadership')){ console.log('already selected');return false; }   console.log('x ' + x + ', y ' + y);   console.log($(id).offset());   var xi = $(id).offset().left;   var yi = $(id).offset().top;   console.log('xi ' + xi + ', yi ' + yi);   var hi = $(id).height();   var wi = $(id).width();   var xoffset = math.abs(x - xi);   var yoffset = math.abs(y - yi);    console.log('xoffset ' + xoffset + ', yoffset ' + yoffset);    $(id).animate({   left: -xoffset + 15,   top: -yoffset,    height: h,   width: w   }, 500, 'linear', function() {console.log('id animation complete');});    var selected = $('.activeleadership');    console.log(selected.offset());   selected.animate({   left: xoffset + 15,   top: yoffset,    height: hi,   width: wi   }, 500, 'linear',function() {     console.log('selected animation complete');     console.log('new active ' + $('.activeleadership').attr('id'));     console.log('new active position x ' +   $('.activeleadership').offset().left      + ', y ' +   $('.activeleadership').offset().top);     console.log('previous active ' + selected.attr('id'));     console.log('previous active position x ' + selected.offset().left + ', y   '          + selected.offset().top);}    );   $(id).addclass('activeleadership');   selected.removeclass('activeleadership');  }

i got , figured out. solution have take offsets of divs based on first offset locations. after they've been animated, moving them again relative starting offset. make work have store starting offset locations in global variable outside of function. if statement associate id of div variable of initial offset. matter of taking difference between div want animate's initial offset , location want move to.

updated plunker http://plnkr.co/edit/c6oaitttvlhltk7b3muf?p=preview

var circle0 = { 'left': $('#circle0').offset().left, 'top': $('#circle0').offset().top }; var bigcircle = { 'height': $('.activeleadership').height(), 'width': $('.activeleadership').width() }; var circle1 = { 'left': $('#circle1').offset().left, 'top': $('#circle1').offset().top }; var circle2 = { 'left': $('#circle2').offset().left, 'top':              $('#circle2').offset().top }; var circle3 = { 'left': $('#circle3').offset().left, 'top':       $('#circle3').offset().top }; var circle4 = { 'left': $('#circle4').offset().left, 'top':   $('#circle4').offset().top }; var othercircles = { 'height': $('#circle1').height(), 'width':   $('#circle1').width() }; var time = 400;  function leadershiptoshow(id) {   var circletomoveup = $(id);   if(circletomoveup.hasclass('activeleadership')){ return false; }   var originofcircletomoveup;   if(id === '#circle0'){ originofcircletomoveup = circle0; }   else if(id === '#circle1'){ originofcircletomoveup = circle1; }   else if(id === '#circle2'){ originofcircletomoveup = circle2; }   else if(id === '#circle3'){ originofcircletomoveup = circle3; }   else if(id === '#circle4'){ originofcircletomoveup = circle4; }   var xoffsetup = circle0.left - originofcircletomoveup.left;   var yoffsetup = circle0.top - originofcircletomoveup.top;    var circletomovedown = $('.activeleadership');   var originofcircletomovedown;   if(circletomovedown.attr('id') === 'circle0'){ originofcircletomovedown = circle0; }   else if(circletomovedown.attr('id') === 'circle1'){ originofcircletomovedown = circle1; }   else if(circletomovedown.attr('id') === 'circle2'){ originofcircletomovedown = circle2; }   else if(circletomovedown.attr('id') === 'circle3'){ originofcircletomovedown = circle3; }   else if(circletomovedown.attr('id') === 'circle4'){     originofcircletomovedown = circle4; }   var xoffsetdown = circletomoveup.offset().left -  originofcircletomovedown.left;   var yoffsetdown = circletomoveup.offset().top -   originofcircletomovedown.top;    /* small circle big circle animation */   circletomoveup.animate({     left: xoffsetup + 15,     top: yoffsetup,      height: bigcircle.height,     width: bigcircle.width   }, time, 'linear');   /* big circle small circle animation */   circletomovedown.animate({     left: xoffsetdown + 15,     top: yoffsetdown,      height: othercircles.height,     width: othercircles.width   }, time, 'linear');    circletomoveup.addclass('activeleadership');   circletomovedown.removeclass('activeleadership'); }

Comments

Post a Comment

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more