Question

This is kinda hard to explain since english isnt my main language so i think it would be easier if you’d take a look at the site im working on first and then I’ll explain what I want to do. Here’s the adress: http://ngmat.site90.net/matsedel/ (the site loads slow because the hosting service has implemented a visitor counting service which takes ages to load (doesn’t really affect the site itself though).

Anyways, what i want to do is that when you press the “Kamera” button at the bottom I want the ‘backgroundCurtain’ div to slide up from the top of the bottom bar. It’s as simple as that, but I can’t figure out how to do it.

I’m quite new to jQuery but what i’ve read so far is that you need to set “bottom:0;” if you want the div to slide upwards the first time you click it (using slideToggle). So I was thinking of making an invisible div that covers the whole site except the bottom-bar (basically “bottom: 35px”) and then setting “bottom: 0” on the backgroundCurtain div. This should make it slide upwards the first time you click it, or?

Answer 1

Get rid of the cameraToggle function, set the backgroundCurtain top css property to be as big as the page height and then add this code..

$("#camera").on('click', function(){
    $("#backgroundCurtain").animate({top: 'toggle'}, 1000);
});