1

私はそれを取得しようとしているので、マウスを上に<div>置くと5px下にスライドし、cssで作成することをお勧めします. （もし可能なら）

<div>移動しようとしている名前は「tothetop」です。

事前にすべての助けをありがとう！

4

4 に答える 4

2

CSS3 トランジションはかなりうまく機能します。

LIVE DEMO

HTML:

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

CSS:

.box{
  width:160px;
  height:80px;
  background:#f46;
  float:left;
  margin:5px;
  border-radius:10px;
  -webkit-transition: 0.4s; // you can use also 400ms if you want
          transition: 0.4s;
}
.box:hover{
  margin-top:10px;
}

jQuery にフォールバックする場合:

jQuery LIVE DEMO

$('.box').on('mouseenter mouseleave', function( evt ){
  var pos = evt.type=='mouseenter' ? 10 : 5 ;
  $(this).stop().animate({marginTop : pos}, 500); 
});

(要素の CSS で既に定義した CSS プロパティを常にアニメーション化するようにしてください (この例ではmargin))

http://api.jquery.com/on/
http://api.jquery.com/stop/
http://api.jquery.com/animate/

于 2013-03-26T01:46:35.083 に答える
1

jquery を使用し、オブジェクトに対して slidedown を呼び出します。

ここに示す例: http://api.jquery.com/slideDown/

または、表示/非表示の代わりに物を移動しようとしている場合は、jquery animate を使用します

http://api.jquery.com/animate/

于 2013-03-26T01:45:00.250 に答える
0

これを試して：

HTML:

<div id="tothetop">
    this move down 5px
</div>

CSS:

#tothetop {position:relative}
#tothetop:hover {top:5px}
于 2013-03-26T01:52:18.873 に答える
0 
<style>
  div:hover {
  margin-top:15;
  }
</style>

この単純なコードは、div を 15 ピクセル下にスライドさせます。

于 2013-03-26T01:52:23.723 に答える