根据元素的高度更改动画的速度 [英] Change the speed of animation depending on the height of the element

问题描述

我使用jQuery将网站页面的内容向上滑动:

I am sliding the content of my website's pages up with jQuery:

$('#main').slideUp(500);

正常工作，除了各个页面的速度明显不同，因为某些页面包含的内容很少(因此#main的高度约为500px)，而另一些页面具有的内容很多(相应地，#main可以高度为10000px).

This works okay, except there's noticeable difference in speed for individual pages, because some pages contain very little content (so #main is about 500px in height), while others have lots of content (and correspondingly, #main could be a 10000px in height).

因此，当500px在500毫秒内向上滑动时，它看起来平滑而缓慢，但是在相同的500毫秒内向上滑动10000px就像是超音速.

So when 500px slide up in 500 milliseconds, it seems smooth and slow, but sliding 10000px up in the very same 500 milliseconds is like supersonic speed.

我认为解决方案应该为括号中的speed参数使用一个变量，该变量将反映#main高度的一定百分比.

I think the solution should be using a variable for the speed parameter in parentheses that would reflect certain percentage of the height of the #main.

这怎么办?

推荐答案

正如其他人所说，我将使用一种算法来获取时间.但是我也有时间限制，因为您可能不希望100000 px花费10秒的滑动时间或200px花费200ms的时间.

As other said, i would use an algorithm to get the time. But i would also had a time limit since you probably don't want the 100000 px to take 10 sec to slide or the 200px to take 200ms.

这是我的解决方法:

var height = $('#main').height(),
    msPerHeight = 1, //How much ms per height
    minRange = 500, //minimal animation time
    maxRange = 1500, //Maximal animation time
    time = height * msPerHeight

time = Math.min(time, maxRange);
time = Math.max(time, minRange);

$('#main').slideUp(time)

这篇关于根据元素的高度更改动画的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！