-1

ガレージゲートの画像があります。ボタンをクリックすると画像が上に移動したいです。しかし、問題は、ボタンをクリックしても画像が移動せず、画像の下からスライドして非表示になることです。これが私のコードです

<script type="text/javascript">
$(document).ready(function(){
  $(".open").click(function(){
    $(".gate").slideToggle(3000)
  });
});
</script>

<body>

<div class="main">
<a class="open" >Home page</a>
<div class="gate"></div>
</main>
</body>
4

3 に答える 3

0

画像を移動する場合は、.slideToggle（）の代わりに.animate（）を使用する必要があります。.slideToggle（）関数は、要素を表示または非表示にします。

于 2012-05-22T19:55:43.593 に答える
0

スライドは正しい答えではありません。スライドは、アニメーション効果ではなく、非表示/フェード効果です。探している効果を得るには、問題の要素のcssプロパティをアニメーション化する必要があります。少し下に移動する要素を探している場合は、要素を下に移動するプロパティをアニメーション化する必要があります。何かのようなもの：

  $(document).ready(function(){
        $(".open").click(function(){
              $(".gate").animate({
                    marginTop : '-=30px'
              });
        });
  });

また、絶対位置とtopプロパティの使用を検討することもできます。またはcss3翻訳。

于 2012-05-22T20:02:26.173 に答える
0

.slideToggle（）は使用しないでください。これは、高さの値をアニメーション化して要素を表示/非表示にします。

.animate（）を使用して、「ホームページ」という単語を押したときに開くゲートをアニメーション化する準備と例を示しました。

この動作するフィドルを参照してください！

HTML

<body>
    <div class="main">
        <a class="open">Home page</a>
        <div class="gate"> </div>
    </div>
</body>

JQUERY

$(document).ready(function(){
  $(".open").click(function(){
      $(".gate").animate({
          "top" : "-=" + $(".gate").outerHeight(true)
      }, 3000);
  });
});

アニメーションが終了する位置は、最終的な目標と、適用したCSSによって異なります。

于 2012-05-22T20:08:15.040 に答える