0

请原谅我，因为我的问题可能很愚蠢，但我是脚本的初学者，真的需要一些帮助。我希望一个元素在按下按钮时从页面上方向下滑动，并在再次按下按钮时向后滑动。这个元素应该填充它所在容器的 100%，所以首先我用 .css('height') 收集容器的高度，然后将此值设置为元素大小和它的位置。然后是一些 .animate 效果。

    $(document).ready(function(){
    //gather dimentions 
    var x=($("#screenctr").css("height"));    
    var y=parseFloat(x);
    var z=(y*-1 + 'px');
  $(".roll").css("height", x);
  $(".roll").css("top", z);
    //slides from above
  $(".bloop").click(function(){
    $(".roll").animate({
       top:'0px'}, "slow");
    $(".bloop").css("display","none");
    $(".bzook").css("display","block");
    });
    //slides back
  $(".bzook").click(function(){         
    $(".roll").animate({
       top:z}, "slow");
    $(".bzook").css("display","none");
    $(".bloop").css("display","block");
    });
  });

它工作正常。但我也希望它在窗口调整大小时改变大小和位置。所以我为 $(window).resize(function(){}

它仍然有效，但非常奇怪。起初，当页面刚刚加载时，一切正常，在第一次调整大小后，它也正确地从上面掉了下来。但从那以后，当它预计要躲起来的时候，几秒钟内什么都没有发生，然后它开始非常缓慢地向上拖动。再次向下——没问题，向上——在长时间的延迟之后再次拖动。有谁知道它可能是由什么引起的？谢谢你。

这是页面：http ://production.zukaty.ru/

4

1 回答 1

1

当您在 $(window).resize() 上使用 .animate() 方法时，添加 .stop() 方法，因为 $(window).resize() 中的函数将每秒被调用次数，并且 .stop() 停止以前的动画，所以像这样使用它：

$(window).resize(function(){
   $(".roll").stop().animate({ ... });
}

这应该可以解决您的问题。

于 2013-05-28T19:38:01.100 回答