jQuery Animate reset

Discussion in 'Web Design and Development' started by Cabbit, Mar 28, 2011.

  1. Cabbit, Mar 28, 2011
    Last edited: Mar 29, 2011

    Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    Link to finished example
    http://cabbit.co.uk/login/

    I have been playing with making a script that pops down a login panel while pushing the site down and placing a overlay over the content.

    However i am struggling and needing a little help with changing the link button to make it close if it as already open.

    Code:
    $(document).ready(function(){
        var height = $('#login').height();
        $('#login').hide().css({ height : 0 });
    
        $('a[rel=login]').click(function() {
          $('#login').animate({ height : height }, {queue: false, duration: 700, easing: 'backEaseOut', complete: function() {
            $("#overlay:hidden").show();
            $('a[rel=login]').addClass("open");
          }});
     });
    
    So far i have tried adding a class of open to the link then trying to use that as a separate action for closing but this has not worked.
     
  2. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #2
    How did you attempt this part? I have something very similar setup on my site using classnames to determine what state my drop-down section is in.

    Did you happen to try testing for the class name using hasClass?

    Theres a little more to it, but this is basically how I have it setup

    PHP:
    $("footer").click(function(){
               if($(
    this).hasClass("open") == false){
                   $(
    this).animate({
                       
    bottom:'0px'
                   
    });
                   $(
    this).addClass("open");
                            $(
    "#footer-title").addClass("footer-title-border");
               }else if(($(
    this).hasClass("open") == true)&&(searchFocus == false)){
                   $(
    this).animate({
                       
    bottom:'-300px'
                   
    });
                   $(
    this).removeClass("open");
                              $(
    "#footer-title").removeClass("footer-title-border");

               }
           });
     
  3. Cabbit, Mar 29, 2011
    Last edited: Mar 29, 2011

    Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    Oh i didn't know i could use conditional statements in jQuery, its still quite new territory. I was trying to have one after the other but the 2nd click event never worked.

    Working quite well now, just need a little css styling and testing before i can integrate it into a project.
    PHP:
        var height = $('#login').height(); // Get the desired height from the css
        
    $('#login').hide().css({ height }); // Hide the login
        
    $("a[rel=login]").click(function(){
          if($(
    "a[rel=login]").hasClass("open") == false){ // The login is NOT open
            
            // Animate the opening of the login and give it a little bounce
            
    $('#login').animate({ height height }, {queuefalseduration700easing'backEaseOut'complete: function() {
              $(
    "#overlay:hidden").show(); // Show the content hide overlay
              
    $('a[rel=login]').addClass("open"); // Add a class of open to the link
            
    }});
            
          }else if($(
    "a[rel=login]").hasClass("open") == true){ // The login IS open
            
    $("#overlay:visible").hide(); // Hide the overlay

            // Animate the collapse of the login
            
    $('#login').animate({ height : -300 }, {queuefalseduration700easing'backEaseOut'complete: function() {
              $(
    'a[rel=login]').removeClass("open"); // remove the open class
            
    }});
      
          }
        }); 
     

Share This Page