如何使用 jquery 缓慢地为 div 的宽度设置动画答案

【问题标题】：How to animate the width of a div slowly with jquery如何使用 jquery 缓慢地为 div 的宽度设置动画
【发布时间】：2013-08-12 23:19:55
【问题描述】：

我将导航嵌套在左侧屏幕外的 div 中，当用户向下滚动页面并到达像素 296 时，左侧导航缓慢出现，其宽度向右增长。

我现在只有一半的工作。当用户向下滚动页面时，会出现嵌套在 div 中的导航，但我希望它缓慢地向右移动，而这并没有发生。不知道我做错了什么。我遇到问题的具体线路是：

$("#slidebottom").animate({ width: "100" }, 'slow');

但这是我的全部代码：

$(window).scroll(function(){

  var wintop = $(window).scrollTop(), docheight = $(document).height(), 
  winheight =    $(window).height();

  var bottomHeight = $("#slidebottom").height();
  var zeroheight = 0;

  if  (wintop > 296) {
    bottomHeight = $('#slidebottom').height(docheight);
    $("#slidebottom").animate({ width: "100" }, 'slow');

  }

  if( wintop < 296)
  {
    bottomHeight = $('#slidebottom').height(zeroheight);    
    //$("#slidebottom").animate({ width: "0" }, 'slow');
  }
});

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

jQuery docs 显示整数，而不是字符串，作为宽度的参数：

$("#slidebottom").animate({ width: 100 }, 'slow');

编辑：所以我错了，这不是问题；它也可以处理字符串。

【讨论】：

感谢您的回答。我一定是做错了什么，因为那并没有解决它。 div 出现但宽度不会缓慢增长。还有其他想法吗？再次感谢。
我整理了一个超级简单的 jsFiddle，它似乎可以像我期望的那样工作：jsfiddle.net/3b5qV。也许你可以把你的小提琴？
谢谢。您的代码绝对正确并且正在运行；但我的整个代码仍然不起作用。我必须弄清楚我做错了什么。再次感谢您。

【解决方案2】：

试试下面的可能吗？

$("#slidebottom").animate({ width: '100px' }, 'slow');

我觉得单位对此很重要，因为 100 可能意味着任何事情。不是很具体。你可以把它定义为一个字符串就好了。事实上，在他们为.animate 给出的示例中，它被定义为一个字符串。

【讨论】：

在 jQuery 自己的示例中，它用单位显示它：api.jquery.com/animate 也许不需要，但这是他们使用的。
嗯，我认为 jQuery 会先解析你的字符串，然后提取数字部分：P
我相信一些 css 属性依赖于 jQuery 中的单位以实现跨浏览器兼容性，因为 jQuery 返回一些 css 属性，单位在值的末尾，所以应该把它放回有单位。也许不是width 属性，但肯定是其他一些。
jQuery 必须有数字才能为属性设置动画。我认为 jQuery 稍后会重新添加该单元。
感谢您深思熟虑的回答。它有助于。让我想想。谢谢。