Question

我有这个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亲，所以我在这里有点死路一条。）我试着添加

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

但它没有做任何事情。反正有没有做我想要完成的事情？

Answer 1

由于fadeOut中对fadeInDiv();的递归调用，导致超出最大调用堆栈错误。使用回调来使递归调用类似于使用window.setTimeout。

else {

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

Demo

要设置不透明度的动画，您可以尝试： -

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

Jquery随机地将不透明度级别更改为许多图像

1 个答案:

Demo

Demo