Question

基本上当我正常悬停在盒子上方时，它会移动并返回到该位置但是当你快速盘旋几次时，盒子会向后移动而失去位置，任何想法为什么？谢谢！

此外，我需要抓住当前的div位置，以便在悬停时使用$(this)。

HTML：

<div class="box_wrap">
    <div class="box">
    </div>
</div>

的CSS：

.box_wrap {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    margin: 10px;
}

.box {
    top: 0;
    left: 0;
    background: green;
    position: absolute;
    width: 200px;
    height: 200px;
}

JS：

$('.box').hover(

  function(){
    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).animate({
      'width': w + 20 + 'px',
      'height': h + 20 + 'px',
      'left': l + 20,
      'top': t + 20
    }, { duration: 200, queue: false });
  },

  function(){
    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).animate({

      'width': w - 20 + 'px',
      'height': h - 20 + 'px',
      'left': l - 20,
      'top': t - 20
    }, { duration: 200, queue: false });
  }
);

Answer 1

这是因为您在对象进行动画处理时会测量大小和位置。测量一次然后使用这些值。

var h = $('.box').height();
var w = $('.box').width();
var t = $('.box').position().top;
var l = $('.box').position().left;

$('.box').hover(

  function(){

    $(this).animate({
      'width': w + 20 + 'px',
      'height': h + 20 + 'px',
      'left': l + 20,
      'top': t + 20
    }, { duration: 200, queue: false });
  },

  function(){
    $(this).animate({

      'width': w + 'px',
      'height': h + 'px',
      'left': l ,
      'top': t 
    }, { duration: 200, queue: false });
  }
);

如果您需要在每次悬停时测量当前大小，则应在进行测量之前停止动画。

$('.box').hover(

  function(){

    $(this).stop(false, true)

    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).stop().animate({
      'width': w + 20 + 'px',
      'height': h + 20 + 'px',
      'left': l + 20,
      'top': t + 20
    }, { duration: 200, queue: false });
  },

  function(){

    $(this).stop(false, true)

    var h = $(this).height();
    var w = $(this).width();
    var t = $(this).position().top;
    var l = $(this).position().left;

    $(this).animate({

      'width': w - 20 + 'px',
      'height': h - 20 + 'px',
      'left': l - 20,
      'top': t - 20
    }, { duration: 200, queue: false });
  }
);

jQuery动画位置悬停在顶部

1 个答案: