javascript - How to animate the width of a div slowly with jquery - Stack Overflow

admin管理员组

文章数量:1295861

I have navigation nested in a div that is offscreen to the left and when the user scrolls down the page and reaches pixel 296, the left navigation slowly appears by it's width growing towards the right.

What I have now is half working. The navigation nested in the div appears when the user scrolls down the page but I want it to animate slowly to the right and that is not happening. Not sure what I am doing wrong. The specific line I am having problems with is:

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

But here is my entire code:

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

I have navigation nested in a div that is offscreen to the left and when the user scrolls down the page and reaches pixel 296, the left navigation slowly appears by it's width growing towards the right.

What I have now is half working. The navigation nested in the div appears when the user scrolls down the page but I want it to animate slowly to the right and that is not happening. Not sure what I am doing wrong. The specific line I am having problems with is:

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

But here is my entire code:

$(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

Share Follow edited Aug 12, 2013 at 23:21 Chad Levy 10.1k88 gold badges4343 silver badges6969 bronze badges asked Aug 12, 2013 at 23:19 Ramona SoderlindRamona Soderlind 21322 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The jQuery docs show ints, not strings, as the arguments to width:

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

Edit: So I was wrong, that's not the problem; it handles strings just as well.

Try the following maybe?

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

I have a feeling that the unit is important for this, since 100 can mean anything. Not very specific. And you can define this as a string just fine. In fact, in the example they give for .animate it is defined as a string.

本文标签： javascriptHow to animate the width of a div slowly with jqueryStack Overflow