Question

I have created a drop-down-menu, the html for the drop-down part basically looks like this:

<div class="menu-item">
  <!-- Menu title -->
  <div class="drop-down">
    <!-- Content -->
  </div>
</div>

I want to animate this using jQuery-Code (with the easing-plugin), but the following Code does not work:

$(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);

function deactivate()
{
  var dropdown = $(this).find("div.drop-down");
  dropdown.stop().animate(
    {height:     '0px'},
    {queue:       false,
     duration:    600,
     easing:      'easeOut'
    }
  );
}

function activate()
{
  var dropdown = $(this).find("div.drop-down");
  dropdown.stop().animate(
    {height:     'auto'},
    {queue:       false,
     duration:    600,
     easing:      'easeOut'
    }
  );
}

The message in the error console is: “Warning: Error in parsing value for ‘height’. Declaration dropped.”

If I use “height: ‘100px'” or somthing similar in the activate-Function it works as expected. But for maintainability reasons i want the height to be calculated autmatically, so the drop-down adapts its size to its content.

How can this be achieved?

Greetings,
Jost

Answer 1

I would try to use slideUp() and slideDown() for this animation. Note that those functions accept easing functions.

Other option, if for some reason you need to use animate for this, you might want to do something like this in your activate function:

function activate(){
  var dropdown = $(this).find("div.drop-down");

  dropdown.css('height','auto')
          .hide()
          .stop()
          .animate(
             {height:     'auto'},
             {queue:       false,
              duration:    600,
              easing:      'easeOut'
          });
}