0

基本上，当我通常将鼠标悬停在盒子上时，它会移动并返回到该位置，但是当您快速悬停几次时，盒子会向后移动并失去位置，知道为什么吗？谢谢！

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

这是代码：http: //jsfiddle.net/JdMqM/1/

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 });
  }
);
4

1 回答 1

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 });
  }
);
于 2013-05-23T16:31:59.907 回答