jQuery 动画后偏移量不变

Question

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

我正在制作 jQuery 动画，需要让动画 div 在动画结束后保留其新的偏移量。

动画的目标是能够单击底部的较小圆圈之一，然后它将 places/size 与顶部的较大圆圈交换。

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

}

Answer 1

我得到了一些帮助并弄明白了。解决方案是您必须根据 div 的第一个偏移位置来获取它们的偏移量。在对它们进行动画处理后，再次移动它们总是相对于它们的起始偏移量。因此，要完成这项工作，您必须将它们的起始偏移位置存储在函数外部的全局变量中。使用 if 语句，然后将 div 的 id 与初始偏移量的变量相关联。然后，只需计算要设置动画的初始偏移量 div 与要将其移动到的位置之间的差异即可。

更新了 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 to BIG CIRCLE animation */
  circleToMoveUp.animate({
    left: xOffsetUp + 15,
    top: yOffsetUp, 
    height: bigCircle.height,
    width: bigCircle.width
  }, time, 'linear');
  /* BIG CIRCLE to SMALL CIRCLE animation */
  circleToMoveDown.animate({
    left: xOffsetDown + 15,
    top: yOffsetDown, 
    height: otherCircles.height,
    width: otherCircles.width
  }, time, 'linear');

  circleToMoveUp.addClass('activeLeadership');
  circleToMoveDown.removeClass('activeLeadership');
}

jQuery 动画后偏移量不变

offset not changing after jQuery animation

javascript

css

jquery

jquery-animate