7. I think I found a bug!


#1

Here's my code:
var main = function(){
$('.icon-menu').click(function(){
$('.menu').animate({left: '+=285px'}, 200);
$('body').animate({left: '+=285px'}, 200);
});
$('.icon-close').click(function(){
$('body').animate({left: '-=285px'}, 200);
$('.menu').animate({left: '-=285px'}, 200);
});
};
$(document).ready(main);
It warks for 100% and I'm sure that it is correct but it give me error: Oops, try again. It looks like the '.menu' didn't animate 285px back to the right. Check your $('.menu').animate() function.


#2

Hey!
There are some errors in your code:

// your code as follows
var main = function(){
$('.icon-menu').click(function(){
$('.menu').animate({left: '+=285px'}, 200); // left: '+=285px' (wrong).' +=' will move the menu every time you click the menu logo which we don't require and you just need to assign 0px in order to make the menu visible. . Therefore left:'0px' is enough. Make all the += or -= to === or : value.

$('body').animate({left: '+=285px'}, 200);
});
$('.icon-close').click(function(){
$('body').animate({left: '-=285px'}, 200);
$('.menu').animate({left: '-=285px'}, 200);
});
};
$(document).ready(main);

//Below is my code, hope I cleared your doubts. Thank you

var main =function(){
$('.icon-menu').click(function(){
$('.menu').animate({left:'0px'},200);
$('body').animate({left:'285px'},200);
});

    $('.icon-close').click(function(){
    $('.menu').animate({left:'-285px'},200);
    $('body').animate({left:'0px'},200);
    });

};

$(document).ready(main);


#3

My answer to # 7:

Just an addendum to @abdulsaboor's answer...

    var main = function() {
    
    // select the icon menu on click
    $('.icon-menu').click(function() {
        // select the menu field and animate it
        $('.menu').animate({
            // shift the pane over to the right:
            left: '0px'
        // let it run over 200 milliseconds:
        }, 200);
        
        // select the body element and shift the page to the left by 285px by 200 milliseconds
        $('body').animate({
            // shift it over to the left:
            left: '285px'
            // set the speed:
            }, 200);
            });
            
    // add another .click() method to close the menu
    $('.icon-close').click(function() {
        // add a .animate() method to change the left offset to -285px
        $('.menu').animate({
            // shift the pane back to the left:
            left: '-285px'
        // run it over 200 msec
        }, 200);
        
        // now shift the html body over 285px to the left:
        $('body').animate({
            // shift it over to the left:
            left: '0px'
            // set the speed
        }, 200);        
    });
};

$(document).ready(main);

#4

:grinning:

not too bad !

your comments is very clear !

var main = function() {
// select the icon menu on click
$('.icon-menu').click(function() {
    // select the menu field and animate it
    $('.menu').animate({
        // shift the pane over to the right:
        left: '0px'
    // let it run over 200 milliseconds:
    }, 200);

    // select the body element and shift the page to the left by 285px by 200 milliseconds
    $('body').animate({
        // shift it over to the left:
        left: '285px'
        // set the speed:
        }, 200);
        });

// add another .click() method to close the menu
$('.icon-close').click(function() {
    // add a .animate() method to change the left offset to -285px
    $('.menu').animate({
        // shift the pane back to the left:
        left: '-285px'
    // run it over 200 msec
    }, 200);

    // now shift the html body over 285px to the left:
    $('body').animate({
        // shift it over to the left:
        left: '0px'
        // set the speed
    }, 200);        
});};$(document).ready(main);