Question

I was making a page where i clicked a button and a full menu opens using the jquery animate command. Then when you click the cross picture, it closes again with the animate command. But the problem is that it’s position is fixed and it contains numbers from 1-30. so when you hide the div, it hides but the numbers are still visible on the left side until or unless you have not changed it’s display property to none

//this resets the size of div to 0
$(document).ready(function(){
$("#fullmenu").animate({
  height:'0%',
  width:'0%'
  });
  });
  //This opens the div
    $(document).ready(function(){
  $("#imgdot").click(function(){
  $("#fullmenu").animate({
height:'90%',
width:'90%',
    });
  });
});
 //This closes the div when the image cross is clicked
$(document).ready(function(){
  $("#cross").click(function(){
    $("#fullmenu").animate({
            height:'0%',
            width:'0%'
      });
   });
});

My question is how to change the display property to none and also animate the div at the same time is a single function

Answer 1

jQuerys animations often don’t affect children of a div,

you can try this:

$("#fullmenu").animate({
        height:'0%',
        width:'0%'
}).children().hide();