Question

I have a problem with a script in my page.

Here my case

http://tommywebdesigner.com/Home%20Page%20copy.html

If you click on productos link a div box falls down from the top. My idea is that if i click again in the productos link the div goes back. I am very close to achieve it but in my case as you can see my div goes back and then falls down again.

This is the script where i am probably doing something wrong:

<script type="text/javascript">
        $(function() {
            $('#productos_link').click(function(){
                $('#overlay').fadeIn('fast',function(){
                    $('#productos').animate({'top':'110px'},500);
                });
            });
            $('#productos_link').click(function(){
                $('#productos').animate({'top':'-400px'},500,function(){
                    $('#overlay').fadeOut('fast');
                });
            });

        });

</script>

Where is the mistake? , how i need to change the script to get my slide box goes back and not falling down again when i click for the second time on productos link?

Here you find the tutorial i have used

http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/

Answer 1

i found this

demo is slow but try to in your code

$(function () {
    $('#productos_link').toggle(function () {
        $('#overlay').fadeIn('fast', function () {
            $('#productos').animate({ 'top': '110px' }, 500);
        });
    }, function () {
            $('#productos').animate({ 'top': '-400px' }, 500, function () {
                $('#overlay').fadeOut('fast');
            });
    });

});