Question

can we use opacity,height,width,left and top together with jquery animate function

$('#div').animate({
opacity : 1,
height  : 300, // You desired height.
width   : 400
});

$('#div').animate({
opacity : 1,
height  : 0,
width   : 0
});

if anyone has any idea then please share with me. thanks

Answer 1

Yes, you can animate those properties together. Your code, as written, works just fine except you probably don’t want to do the one immediately followed by the other.

Here’s a working example:

jQuery(function($) {

  $("#theButton").click(function() {
    var theDiv = $("#theDiv");
    if (theDiv.height() > 0) {
      theDiv.animate({
        opacity : 0,
        height  : 0,
        width   : 0
      });  
    }
    else {
      theDiv.animate({
        opacity : 1,
        height  : 300, // You desired height.
        width   : 400
      });  
    }
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Side note: I would strongly discourage you from giving an element the id “div”. That’s just asking for confusion.