jQuery animate causing screen to jump

So I'm learning jQ开发者_开发百科uery and I think there is something that I am missing. I am using the following code on a "div" tag:

$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });

It appears to be a final jump when it is finishing the animation. Any ideas about how to get rid of that?

EDIT: css for the div tag

<div id="faq-group-notice" class="flash notice hidden"></div>

.hidden { display: none; }

.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}

Check out this update to your jsFiddle.

The "jump" is coming from the margin and border that you have put on the div that's being hidden/shown. The height animation (and also the built-in slide effects) don't account for margin and border. As a result, the animation runs, (for example, on a "hide") it collapses the interior height of the element to zero, then it applies display:none -- since the element's margin and border are still visible, the application of display:none causes the element to "blip" out of existence. The opposite happens when you show such an element -- it "blips" into existence, then the interior height expands from zero to the original/natural height of the element.

in my adjustment of your jsFiddle (linked above), I have simply added a div that wraps the content you're hiding/showing, and I've moved your css classes flash and notice to the interior div. Now, all of the visible content (including the margin and border) are inside #faq-group-notice, so when the height animation effect runs, it collapses everything -- not just the stuff inside the border.

@Mark ,

All you want is slideDown and up right , you can use this

$("#faq-group-notice").slideDown();
$("#faq-group-notice").slideUp();

see jquery api for multiple options

http://api.jquery.com/slideUp/

While I think that @gov probably nailed your problem with his answer, I choose to offer this JS Fiddle example as a...further suggestion.

This uses the following jQuery:

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500).slideUp(500);
    });

And requires a user-interaction (which I presume to be your intent in the real use-case) to close the #faq-group-notice div.

$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').click(
    function(){
        $(this).animate({opacity: 0},500,
                        function(){
                            $(this).animate(
                                {
                                    'border-width':0
                                }, 100).slideUp(500);
                        });
    });

Revised JS Fiddle demo.

Edited Re-revised jQuery, and demo, in response to the OP's comment:

Actually, this is just a way of sending a bit of information to the user. I would like it to just disappear after a bit of time. Currently, I have the timeout to execute this code to run after 3 secs.

$('$('#faq-group-notice').slideDown(1000);
$('#faq-group-notice').delay(3000).animate({
    opacity: 0
}, 500, function() {
    $(this).animate({
        'border-width': 0
    }, 100).slideUp(500);
});

Re-revised JS Fiddle demo.

@gov is right, using one of the slide* methods would probably make more sense for what you're trying to do. However, if you want to animate() it yourself then you'll want to animate everything that takes up space including the margin-bottom:

$("#faq-group-notice").animate({
    height:       '0px',
    marginBottom: '0px',
    padding:      '0px',
    borderWidth:  '0px',
    opacity:      0
}, function() { $(this).remove() });

The callback is there just to clean things up at the end. For example: http://jsfiddle.net/ambiguous/w5gVU/1/

If your animation is being called from an <a href="#">Show ...</a> tag, remember to return false on the click handler.

Also, if your div has a static position, it will push down all the content below it. To fix that, position it absolutely or relatively, but beware that when it expands it might cover over something else.