jQuery Animate reset

[Cabbit]

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.

$(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.

 

[Ride9650]

http://cabbit.co.uk/login.htm


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.

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

$("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");

   		}
   	});

 

[Cabbit]

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.

    var height = $('#login').height(); // Get the desired height from the css
    $('#login').hide().css({ height : 0 }); // 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 }, {queue: false, duration: 700, easing: '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 }, {queue: false, duration: 700, easing: 'backEaseOut', complete: function() {
          $('a[rel=login]').removeClass("open"); // remove the open class
        }});
  
      }
    });