JavaScript - Jquery : Need help in showing effects

Hi,
I am trying to give a hide effect on click of a div which includes
$('#menu').click(function(e){  
.....

       $("#main1").hide(2000, function () {
          document.getElementById("main").style.width="98%";  //Changing width 'n' to 98%
          document.getElementById("galleryContainer").style.width="98%";  //Changing width 'n' to 98%
          document.getElementById("gallery").style.margin="auto";  //Aligning in middle
       });   
}

this is working fine... but want to add
$(this).hide("slide", { direction: "right" }, 1000);
and execute the function steps also..
Can anybody tell me how my code should be modified so function will be called on hide which will change the width and alignment with slide hide effect.

Try like this-


$('#menu').click(function(e){  
.....
     $(this).hide("slide", { direction: "right" }, 1000); 

     $("#main1").hide(2000, function () {
      document.getElementById("main").style.width="98%";  //Changing width 'n' to 98%
      document.getElementById("galleryContainer").style.width="98%";  //Changing width 'n' to 98%
      document.getElementById("gallery").style.margin="auto";  //Aligning in middle
     });   
}

Hi Tejaswini,

I would like you to try out this code:

<a href="#" id="lnk1">show div 1</a> &nbsp;
<a href="#" id="lnk2">show div 2</a>
<br/><br/>
<div id="divParent">
    <div id="div1">
        <pre>
    these are the contents of div 1
    div1 items here
    div 1 items
    </pre>
    </div>
    <div id="div2">
        <pre>
    these are the contents of div 2
    the quick brown fox jumsp over the lazy dog
    </pre>
    </div>
</div>
==============================

$(document).ready(function() {
    var h1 = $("#div1").height();
    var h2 = $("#div2").height();
    $("#div1,#div2").height(Math.max(h1, h2));
    $("#div2").hide();
});

$("#lnk1").live('click', function() {
    $("#div1").show();
    $("#div2").hide();
});

$("#lnk2").live('click', function() {
    $("#div2").show();
    $("#div1").hide();
});

==================

#divParent {
    border:1px solid blue;
    height:200px;
    overflow:auto;   
}

#div1{
 border:1px solid red;   
}

#div2{
    border:1px solid yellow;
}
===

See the below show:

SHOW DIV 1:

 these are the contents of div 1
    div1 items here
    div 1 items

SHOW DIV 2:
these are the contents of div 2
the quick brown fox jumsp over the lazy dog

Hope it helps you
Do update us again.
Thank you
Anil

Hello

 

Try to js as following way

    <script language="javascript" type="text/javascript" src="jQuery.js"></script>

 

    <script language="javascript" type="text/javascript">

      $(document).ready(function() {

 

        $('#btnClick').click(function() {

          $("#div1").toggle(2000, function() {

            $("#div2").width(5);  //Changing width 'n' to 98%

            $("#div2").css("float", "left");

          });

        });

      });

    </script>

 

    <asp:Button ID="btnClick" runat="server" OnClientClick="javascript:void(0);return false;"

      Text="Button" />

    <div style="float: left" id="div1">

      TEst1

    </div>

    <div style="float: left" id="div2">

      TEst2 TEst2 TEst2 TEst2 TEst2 TEst2 TEst2

    </div>

 

Pls check it and let me know your feedback.