如何使用单个 jquery 更改 div 的显示属性和动画

Question

我正在制作一个页面，单击一个按钮并使用 jquery animate 命令打开一个完整的菜单。然后当您单击十字图片时，它会再次使用动画命令关闭。但问题是它的位置是固定的，它包含从 1 到 30 的数字。因此，当您隐藏 div 时，它会隐藏，但数字仍然在左侧可见，直到或除非您没有将其显示属性更改为 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%'
      });
   });
});

我的问题是如何将 display 属性更改为 none 并同时为 div 设置动画是单个函数

Answer 1

jQuerys 动画通常不会影响 div 的子元素，

你可以试试这个：

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

Answer 2

使用这个

$('#foo').fadeOut("slow", function(){
    var div = $("<div id='foo'>test2</div>").hide();
    $(this).replaceWith(div);
    $('#foo').fadeIn("slow");
});

Answer 3

Css can be changed as $("#divId").css('display','none');

$(document).ready(function(){

  $("#cross").click(function(){

    $("#fullmenu").animate({

            height:'0%',
            width:'0%'
      },complete:function(){

$("#fullmenu").css('display','none')
});
   });
});


That said, you could use :

$(document).ready(function(){

  $("#cross").click(function(){

    $("#fullmenu").slideUp();
   });