0

我有这个 HTML 代码：

<div class="container">
<a href=""><img class="fade" src="img.jpg" /></a>
<a href=""><img class="fade" src="img.jpg" /></a>
<a href=""><img class="fade" src="img.jpg" /></a>
<a href=""><img class="fade" src="img.jpg" /></a>
<a href=""><img class="fade" src="img.jpg" /></a>
</div>

我正在尝试使用 jquery 制作和效果，以便将每个图像的不透明度随机调整为任何不透明度级别（模拟淡出但不完全）并在无限循环中随机调整回 1（模拟淡入）

我想对每张图片随机进行

我试图调整这个 jquery 行

    (function fadeInDiv() {
    var divs = $j('.fade');
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.fadeIn(Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.fadeOut(Math.floor(Math.random() * 1000), function() {
            elem.before('<img>');
            fadeInDiv();
        });
    }
})();

做到这一点，但我无法让它工作（我不是 jquery pro，所以我在这里有点死胡同。）我试图添加

.fadeTo('slow', 0.1);和.fadeTo('slow', 1);

但它什么也没做。反正有没有做我想要完成的事情？

4

1 回答 1

2

fadeInDiv();由于fadeOut 中的递归调用，您正在导致 max-call stack exceeded 错误。使用回调使递归调用类似于 using window.setTimeout。

else {

        elem.fadeOut(Math.floor(Math.random() * 1000), function() {
            elem.before('<img>');
            window.setTimeout(fadeInDiv); //<-- Here
            //fadeInDiv();
        });
    }

演示

要为不透明度设置动画，您可以尝试以下操作：-

//Code
elem.animate({
         opacity: (Math.random() * 1)
     }, Math.floor(Math.random() * 1000), function () {
         elem.before('<img>');
         window.setTimeout(fadeInDiv);
         //fadeInDiv();
     });

演示

于 2013-06-09T22:12:55.830 回答