jquery - クリックしたときに Div が正しくスライドアップしない

Question

ボタン/リンクをクリックすると上にスライドするdivが1つありますが、最初に少し下に移動してからバックアップするように見えるため、少し奇妙に見えます。ボタン/リンクをクリックすると、最初に下に移動せずに上にスライドする必要があります。

ここに私が使用しているjqueryコードがあります:

 $(document).ready(function($){
    $('#hide_cookie').click(function() {
      $('.cookie').slideUp('slow', function() {
        // Animation complete.
      });
    });
});

これはhtmlコードです：

<div class="cookie">
    <div class="container_12">
        <span>header here</span>
        <p>tex there</p>
    </div>
    <div class="button">
       <a href="#" id="hide_cookie" class="read-more">Continue</a>
    </div>
</div>

助言がありますか？

Answer 1

要素には高さプロパティが必要です。そうしないと、jQuery はスムーズなアニメーションを実行できません。

続きを読む

基本的なjQueryのslideUpとslideDownが私を怒らせます!

Answer 2

試すevent.preventDefault()

ここ

 $('#hide_cookie').click(function(e) {
  e.preventDefault();
  $('.cookie').slideUp('slow', function() {
    // Animation complete.
  });
});