Question

我创建了一个下拉菜单，下拉部分的html基本上是这样的：

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

我想使用jQuery-Code（使用easing-plugin）为此设置动画，但以下代码不起作用：

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

错误控制台中的消息是：“警告：解析'height'值时出错。声明已丢失。”

如果我在activate中使用“height：'100px'”或类似的东西 - 它按预期工作。但出于可维护性的原因，我希望自动计算高度，因此下拉菜单会根据其内容调整其大小。

如何实现这一目标？

问候，斯特

Answer 1

我会尝试将slideUp()和slideDown()用于此动画。请注意，这些函数接受缓动函数。

其他选项，如果出于某种原因需要使用animate，您可能希望在activate函数中执行以下操作：

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

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

Answer 2

一种解决方案可以将高度值存储在deactivate方法中，并在激活时使用它。我不认为jQuery支持将维度属性设置为字符串值。

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

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

在jQuery动画中将div height设置为default

2 个答案: