[英]How to dynamically load in page elements (i.e. images) with an animation?
I have a 2-row, 3-column grid of large squares that I'm going to place thumbnail links inside of for categorized navigation. 我有一个2行3列的大方块网格,我将在其中放置缩略图链接以进行分类导航。 I will worry about elements within the squares later, however, as this question pertains to the actual squares themselves. 但是,稍后我将担心正方形中的元素,因为该问题与实际正方形有关。
First, I want to preload all elements and display them at once. 首先,我想预加载所有元素并立即显示它们。 This portion doe not require an animation effect. 这部分不需要动画效果。 They can just pop in like normal. 它们可以像平常一样弹出。
Second, I want this grid of squares to come in. The rest of the page and the squares can come in simultaneously since they will be loaded together. 其次,我希望这个正方形的网格可以进入。页面的其余部分和正方形可以同时进入,因为它们将一起加载。 This portion does, however, require an animation effect; 但是,此部分确实需要动画效果。 I want the squares and their respective children elements to zoom in from nothing. 我希望正方形及其各自的子元素从零开始放大。
See the "zoom" effect here . 在此处查看“缩放”效果。
Third, I'd like to load/animate in the squares in a sequential order, from first to last, each one coming in individually (or slightly overlapping). 第三,我想按顺序从上到下在正方形中加载/设置动画,每个单独出现(或稍微重叠)。 I'm sure we're just talking parameters now. 我确定我们现在只是在谈论参数。
Well, that's it. 好吧,就是这样。 I know this a tall order, but I'm pretty new to jQuery so hopefully someone can help with at least some of it! 我知道这是一项艰巨的任务,但是我对jQuery来说还很陌生,因此希望有人至少可以帮上忙!
I created a plugin todo something similar to this. 我创建了一个插件来执行与此类似的操作。 Have a look at it here: https://github.com/navgarcha/jquery-slotload 在这里看看: https : //github.com/navgarcha/jquery-slotload
You could use the onComplete
option to move loaded items before the first .loading
image so they appear to load in sequence. 您可以使用onComplete
选项在第一个.loading
图像之前移动已加载的项目,以便它们看上去按顺序加载。
As you require a zoom effect rather than a slot machine like effect you can prob replace the animate code todo the zoom. 由于您需要缩放效果而不是像老虎机那样的效果,因此您可以替换动画代码来进行缩放。
Feel free to tear apart the code to suit you. 随意拆开适合您的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.