Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Add condition to Animate function

    Hi all , im a newbie to jquery and tried hard to write bits of code...My problem is I have a panel with absolute position left set to 0 in default and I want to hide in by sliding it to the left..so as used the animate funstion lije this:


    <script type="text/javascript">
    $(document).ready(function() {

    $("#panel-tab").click(function(e) {

    e.preventDefault();
    $("#panel").animate({"left":"-856px"}, "slow");

    });
    });
    </script>

    MY CSS:
    #panel {
    width: 864px;
    height: 369px;
    position: absolute;
    top: 195px;
    left: 0px;
    z-index: 200;
    background:url('../images/bg_panel.png') no-repeat;
    padding:20px 0 0 18px;
    text-align:left;
    }
    #panel-tab {
    width: 21px;
    height: 371px;
    position: absolute;
    top: 9px;
    left: 856px;
    background:url(../images/panel-arrw-show.png) no-repeat;
    text-decoration: none;
    color: #FFFFFF;
    text-indent:-999999px;
    }




    It work well but not I must figured out how to make a check or if statement to bring back the panel to default position when clicked again.

    Any help on how to do that please?

    //Sam

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'd do it like this:

    Code:
    $("#panel-tab").click(function(e) {
    
    e.preventDefault();
    if($('#panel').hasClass('hidden'))//it's already hidden
    {
    $("#panel").animate({"left":0}, "slow").removeClass('hidden');//move it to the right and remove the hidden class
    }
    else $("#panel").animate({"left":"-856px"}, "slow").addClass('hidden');//it's not hidden so hide it and add the hidden class
    
    });
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •