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 に答える