Custom dock with jquery

Question

I am attempting to create a show/hide doc with jquery. Now I am animating the top position from -200pc to 0 with this code:

$('#play-the-series').click(function(){
            $('#main-nav #content').animate({
                    top: '0'
                }, 1000, 'jswing');
        });

I need to toggle the position back to -200px to close the dock. I also want to keep the width consistent 100%.

This was the original code:

    $('#play-the-series').click(function(){
            $('#main-nav #content').toggle(function(){
                $(this).animate({
                    top: '0'
                }, 1000, 'jswing'),
                $(this).animate({
                    top: '-200px'
                }, 1000, 'jswing');
        }); 
    });

I am close with this:

$('#play-the-series').click(function(){
        if($('#main-nav #content').css('top', '-200px')){
                $('#main-nav #content').animate({
                    top: '0'
                }, 1000, 'jswing');
            }else{
                $('#main-nav #content').animate({
                    top: '-200px'
                }, 1000, 'jswing');
            }
    });

But the else statement doesn't seem to work...

Can this be done?

Can no one tell me what is wrong here? – EZDC Oct 01 '12 at 22:53 — EZDC, Oct 01 '12 at 22:53

Sidharth Mudgal · Answer 1 · 2012-10-01T02:30:35.387

3

You need top: '-200px'. You missed the px.

EDIT: .toggle does not do what you think it does. See Toggle Documentation. You should doing:

if ($('#main-nav #content').is(':visible'))
    $(this).slideDown(1000, 'jswing');
else $(this).slideUp(1000, 'jswing');

edited Oct 01 '12 at 02:30

answered Oct 01 '12 at 01:57

Sidharth Mudgal

4,234
19
25

it still just gets sucked up to the top left corner and disappears. It seems like it is toggling show and hide not my functions. – EZDC Oct 01 '12 at 01:59
Are you sure top was `-200px` at the start? – Sidharth Mudgal Oct 01 '12 at 02:02
And what do you mean by 'sucking it up to the corner'? Can you make a JsFiddle for this? – Sidharth Mudgal Oct 01 '12 at 02:04
http://jsfiddle.net/5RWr6/ this is my first fiddle so please bare with me. New to jquery as well... – EZDC Oct 01 '12 at 02:12
yea didn't work... Isn't :visible used to detect whether an element is display: block/none... – EZDC Oct 01 '12 at 02:38

Custom dock with jquery

1 Answers1