CODEWITHSUNDEEP
jquerydock
EZDC
EZDC

Reputation: 682

Custom dock with jquery

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?

Upvotes: 0

Views: 321

Answers (1)

Sidharth Mudgal
Sidharth Mudgal

Reputation: 4264

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');

Upvotes: 3

Related Questions