Div is not sliding up correctly when clicking on it

Question

I have one div that slides up after clicking on a button/link, but it seems to move down slightly first and then backup which makes it look a bit strange. When clicking the button/link it should just slide upwards without moving down first.

here is the jquery code that i am using:

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

this is the html code:

<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>

any suggestions?

Answer 1

The element needs to have a height property. Otherwise jQuery wont do a smooth animation.

Read more

Basic jQuery slideUp and slideDown driving me mad!

Answer 2

try event.preventDefault()

here

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