0

プロジェクトを展示する「ガレージドア」タイプのものを作っています。背景画像を含む div ( whole) があり、次に別の div ( project_info) が情報とともに下にスライドし、 の背景画像を覆いwholeます。それは私の好きなように正確に機能しますが、最初はアニメーションが機能しません。3 つの要素 ( project_info、project_nameおよびproject_desc) はすべて、異なる速度でスライドする必要があるときに同じ速度でスライドします。ただし、毎回、スライドは機能します。

HTML:

<div class="whole" style="background-image: url('rail.jpg');">
  <div class="project_info">
    <span class="project_name">Rail Direct</span>
    <span class="project_desc">Lorem ipsum dolor sit amet</span>
  </div>

jQuery:

 <script type="text/javascript">
$(document).ready(function(){
$(".whole").hover(function() {
  $('.project_info').stop().animate({"top": "0px"}, 300);
  $('.project_name').stop().animate({"top": "0px"}, 1000);
  $('.project_desc').stop().animate({"top": "0px"}, 650);
},
function() {
  $('.project_info').stop().animate({"top": "-155px"}, 800);
  $('.project_name').stop().animate({"top": "-155px"}, 300);
  $('.project_desc').stop().animate({"top": "-155px"}, 650);
});

});

おそらく重要なのは、ホバーのマウスアウト部分が初めて機能することです。

4

1 に答える 1

0

http://jsfiddle.net/qG5Hh/1/を見てください

position:relative を使用した場合、内部スパンは、含まれる div に独自の速度を加えた速度と同じ速度で移動します。トップ値の代わりにdivの高さを設定することで、あなたが探していた結果を得ようとしました。

于 2012-09-10T22:52:28.957 に答える