CODEWITHSUNDEEP
jqueryhtmljquery-animate
Jordan Schnur
Jordan Schnur

Reputation: 1353

jQuery Animate topbar

I have a top navBar that I need to go up when I click it.

    var foo = false
$(document).ready(function(){
    $(".topBar").click(function(){
        findOut();
    });
});
function up()
{
    $(".topBar").animate({height:5},"slow");
}
function down()
{

    $(".topBar").animate({height:30},"slow");
}
function findOut()
{
    if (foo===true)
    {
        down();
        up =  false;
    }
    elseif (foo===false)
    {
        up();
        up = true;
    }
}

And before you ask, yes I do have the jQuery file installed.

Here is my website: learntc.net The very top bar.

Upvotes: 0

Views: 193

Answers (2)

nicosantangelo
nicosantangelo

Reputation: 13726

Have you consider doing:

  $("#topBar").click(function()
    {
        $(this).slideToggle()
    });

that will make your bar go up or down without the need to use a flag.

docs

If you don't want to slide it all the way, your code looks fine except for a missing whitespace in elseif(up===false).

If you try it on your site you'll see that the text is still visible even when you set the height to 5px, I recommend you add a overflow:hidden so it can remain hidden

EDIT Working code:

var up = false
$(document).ready(function(){
        $(".topBar").click(function(){
            findOut();
        });
    });
    function upFunc()
    {
        $(".topBar").animate({height:5},"slow");
    }
    function down()
    {

        $(".topBar").animate({height:30},"slow");
    }
    function findOut()
    {
        if (up===true)
        {
            down();
            up =  false;
        }
        else if (up===false)
        {
            upFunc();
            up = true;
        }
    }

Upvotes: 1

Justin Taylor
Justin Taylor

Reputation: 81

You are redefining the up variable to equal the up() function. Maybe change to:

var isup = false;

Upvotes: 0

Related Questions