jquery - 无法复制效果

标签 jquery css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 9 年前

我的一个客户想要类似创意机构主页的效果Red其中,在页面加载时, block 似乎在略有不同的时间向上滚动。

我很困惑这是如何实现的。任何人都可以为我阐明它吗?

最佳答案

这是我做的一个 fiddle ,就是这样工作的

http://jsfiddle.net/T4RHp/1/

请记住,不透明度可能对 IE 有一些问题

编辑:不需要 setTimeout(),我只是把它放在那里以在运行脚本时获得一些延迟

代码:

var timeArray = [200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800];

setTimeout( function() {

    $('.box').each( function ()
    {
        var intVal = Math.floor((Math.random()*12));
        $(this).animate({ top: 0, opacity: 1 }, timeArray[ intVal ]);   
    });

}, 500);

CSS:

.box 
{
    opacity: 0;
    height: 100px;
    width: 100px;
    position: relative;
    top: 40px;
    margin: 20px;
    border: 1px solid #333;
    float: left;
}

html:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

关于jquery - 无法复制效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20635865/

上一篇:jQuery 在相邻元素淡出时进行内联 div 转换

下一篇:html - CSS Firefox - 顶部填充更改宽度

相关文章:

javascript - 在 JQuery 中选择新值时如何重新加载页面和更新选择

css - 无法解决 woocommerce 购物车页面标题中的红色下划线

html - Div 页脚不会停留在底部

html -::before 和::after 是什么意思?

jquery - 从数组值旋转 jquery ui spinner

javascript - 在加载了 AJAX 的 DOM 元素上运行 jQuery 脚本

javascript - 使用 jQuery 启动和停止 css3 动画

css - 内联 block 不在同一行

jQuery 功能同步(仅适用于警报)

javascript - : $(this. el).html 和 this.$el.html 有什么区别