在 jQuery 动画中将 div 高度设置为默认值

发布于 2024-11-07 14:06:08 字数 988 浏览 0 评论 0原文

我创建了一个下拉菜单，下拉部分的 html 基本上如下所示：

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

我想使用 jQuery 代码（带有缓动插件）对其进行动画处理，但以下代码不起作用：

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

消息错误控制台中的内容是：“警告：解析“高度”值时出错。声明已删除。”

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

如何才能实现这一目标？

问候，约斯特

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兲鉂ぱ嘚淚 2024-11-14 14:06:08

我会尝试使用 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'
          });
}

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'
          });
}

回复收藏 0 原文

把昨日还给我 2024-11-14 14:06:08

一种解决方案可以将高度值存储在停用方法中并在激活时使用它。我不认为 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));

One solution could be store the height value in the deactivate method and use it when activating. I do not think that jQuery supports animating a dimension property to a string value.

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));

回复收藏 0 原文

~没有更多了~