locked
Div slide animation on button click? RRS feed

  • Question

  • User1224379429 posted

    Hi 

    I am using the below code to slide the div on button click, but the problem is whenever page gets refresh div is sliding. I don't want to slide div on page refresh, but on button click.

    How to do this?

        <script type="text/javascript">
        
        $(function() {
    	$('#nav').stop().animate({'margin-right':'-430px'},500);
    	//$('#nav').stop().animate({'margin-right':'-430px'},400);
    	//$('#nav').hide();
    
    function toggleDivs() {
        var $inner = $("#nav");
        if ($inner.css("margin-right") == "-430px") {
            $inner.animate({'margin-right': '0'});
    		$(".nav-btn").html('<img src="../images/close.png" alt="open" />')
        }
        else {
            $inner.animate({'margin-right': "-430px"}); 
    		$(".nav-btn").html('<img src="../images/NEW.jpg" alt="close" />')
        }
    }
    $(".nav-btn").bind("click", function(){
        toggleDivs();
    });
    
    });
    
        
        </script>
    
    
     <div id="nav">
            <div class="nav-btn"><img src="../images/NEW.jpg" alt="open" /></div>
            <div id="innerNav">
    			<table>
    	                <tr>
                        <td>                        
                            <label>Department Code</label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtADeptCode" runat="server" Text="" required></asp:TextBox>
                        </td>
                    </tr>
    		
               
    	            </table>	         
            </div>
      </div> 

    Thanks

    Tuesday, October 27, 2015 2:58 AM

Answers

  • User1724605321 posted

    Hi ,

    Then use this :

      $('#nav').css("margin-right", "-430px");

    Instead of

    $('#nav').stop().animate({'margin-right':'-430px'},500);
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 27, 2015 5:40 AM

All replies

  • User1724605321 posted

    Hi Athar Ali Khan,

    Please try to delete this line:

    $('#nav').stop().animate({'margin-right':'-430px'},500);

    Best Regards,

    Nan Yu

    Tuesday, October 27, 2015 4:32 AM
  • User1224379429 posted

    Hi

    If I delete the code div will appear on top, but my requirement is div should appear only when User click on the below div

    <div class="nav-btn"><img src="../images/NEW.jpg" alt="open" /></div>

    Thanks

    Tuesday, October 27, 2015 5:35 AM
  • User1724605321 posted

    Hi ,

    Then use this :

      $('#nav').css("margin-right", "-430px");

    Instead of

    $('#nav').stop().animate({'margin-right':'-430px'},500);
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 27, 2015 5:40 AM
  • User1224379429 posted

    Hi

    Thank you

    Tuesday, October 27, 2015 8:26 AM