Question

我有一个9 x 6网格的纯色蓝色方框。当您将鼠标悬停在一个方框上时，蓝色渐变会淡出并显示下方的照片。目前，使用CSS :hover和transition完成了淡出。

在页面加载时，用户不会知道盒子下面隐藏着图像，因此我想“随机选择”框中的“闪烁”。

页面加载时，应选择随机数量的方框
每个方框应fadeOut()显示100毫秒的照片
一旦淡出，应立即fadeIn()再次覆盖照片
然后，下一个随机元素应该起到相同的作用

我认为，如果其中20个左右快速连续运行，它看起来很整洁。这是我到目前为止的代码：

jQuery Random插件：

jQuery.fn.random = function() {
    var randomIndex = Math.floor(Math.random() * this.length);
    return jQuery(this[randomIndex]);
};

jQuery代码：

$(document).ready(function() {

    // 'Shimmer' the boxes on the homepage
    if($('div#box-container').length > 0) {
        for(i = 0; i <= 20; i++) {
            shimmer($('div#box-container div.box-overlay').random().delay(500));
        }
    }
    function shimmer(object) {
        object.fadeIn(100).delay(250).fadeOut(100);
    }

});

此代码有效，但有几个问题：

淡入淡出效果不平滑 - 在完全不透明度和完全透明度之间闪烁
立刻，效果似乎适用于大约6个盒子。剩下的14个然后在接下来的几秒钟内闪现。

我确信必须有一种平稳而有效的方法来做到这一点 - 任何想法？

jQuery - 在几个盒子上创造一个“闪烁”的效果，流畅

0 个答案: