jquery - 単一のjqueryを使用してdivの表示プロパティを変更してアニメーション化する方法

Question

ボタンをクリックすると、jqueryanimateコマンドを使用して完全なメニューが開くページを作成していました。次に、十字の画像をクリックすると、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

これを使って

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

Answer 2

jQuerysアニメーションは、多くの場合、divの子には影響しません。

あなたはこれを試すことができます：

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

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();
   });