用户滚动后触发jquery .animate

时间:2012-10-18 20:20:14

标签: javascript jquery html jquery-ui

我正在试图弄清楚为什么这个脚本不起作用。 我所拥有的是隐藏在另一个div后面的div,并且需要它在用户滚动页面后进行动画制作。

这是我的剧本:

$(document).scroll(function(){   
    var top = $(document).scrollTop();

    if (top > 50) {        
      $('#merch').animate({ bottom: 200 }, 
        {duration: 1000, easing: 'easeOutBounce'});         
        }        
    else {
      $('#merch').slideDown();
    }        
});

2 个答案:

答案 0 :(得分:0)

$(document).scroll(function(){   
var top = $(document).scrollTop();

if (top > 50) {        
  $('#merch').animate({ top: '500px' }, 
    {duration: 1000});        
    }        
else {
  $('#merch').slideDown();
}        });
  1. 我收到的错误是你要传递的宽限值,可能要查看。
  2. 动画值需要带有px值的引号
  3. 确保merch有'position:relative;'在CSS中。没有它,jQuery无法移动元素

答案 1 :(得分:-1)

没有onscroll完成功能,但您可以将它们连在一起:

var int;

$(window).scroll(function(){
    clearTimeout(int);
    int = setTimeout(function(){
        //animation here
    }, 300);
});

等待300ms然后触发动画功能将div拉到页面顶部。