2

私はまだjavascript、jQuery、jQuery UIを学んでいて、とても簡単に思えることをしようとしています:

灰色の div ボックスをホバーすると拡大し、ホバーしている間は新しいサイズを維持し、マウスを離したときにのみ元のサイズに戻るようにします。

これが私のコードです：

$("div").hover(
 // Mouse Over: Expand to 75 x 75
  function(){
    $(this).effect("size", { to: {width: 75,height: 75} }, 1000);
  },
  // Mouse Out: 50 x 50 is original size
  function(){
    $(this).effect("size", { to: {width: 50,height: 50} }, 500);
});

私は近くにいることを知っていますが、うまくいきません。ここで私のフィドルを参照してくださいhttp://jsfiddle.net/L496W/1/。ボックスは大きなサイズに拡張されますが、ホバリングしたまま元のサイズに縮小されます。

私は何を間違っていますか？

また、ここで .toggle() が役に立ちますか?

ありがとう！

4

1 に答える 1

4

jQuery の.animate()メソッドを使用します。

$("div").hover(
  // Mouse Over
  function(){
    $(this).animate({width: 75,height: 75}, 1000);
  },
  // Mouse Out
  function(){
      $(this).animate({width: 50,height: 50}, 1000);
});

jsfiddle

于 2013-02-11T21:00:16.550 に答える