Question

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

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

Answer 1

当你在$（window）.resize（）上使用.animate（）方法时添加.stop（）方法，因为$（window）.resize（）中的函数将被调用每秒的次数和.stop （）停止上一个动画，所以像这样使用它：

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

这可以解决您的问题。

使用js .resize事件的奇怪延迟

1 个答案: