javascript - 如何使用 jquery 缓慢地设置 div 的宽度动画

标签 javascript jquery animation

我将导航嵌套在左侧屏幕外的 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');
  }
});

最佳答案

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

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

编辑:所以我错了,这不是问题;它也能处理字符串。

关于javascript - 如何使用 jquery 缓慢地设置 div 的宽度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18198216/

相关文章:

javascript - 无法使用子选择器定位特定的 LI 元素

android - 从xml样式项中取出状态栏

ios - UIView.animateWithDuration 越界

javascript - 在哪里可以找到有关 Javascript 引擎内部结构的信息?

javascript - YouTube将http重定向到https并使用Flash Player代替HTML5

Javascript 悬停事件

javascript - babel-cli vs babel-preset-es2015 vs babel-register vs babel-core?

javascript - 停止 Vimeo 嵌入 Jquery Infinite Carousel 中的上一个/下一个按钮

jquery - 如何使用 jquery 将光标突出显示的文本粘贴到文本输入字段中

Android LinearLayout 动画的可见性问题