为自动淡入和淡出选择随机 div答案

【问题标题】：Selecting random div for auto fade in and fade out为自动淡入和淡出选择随机 div
【发布时间】：2015-11-11 14:31:59
【问题描述】：

目前，此代码通过选择 div 元素的排列方式（连续顺序）自动淡入和淡出 div。我现在要做的是使选择器随机化，我想淡入一个随机的 div 并在淡出它之后选择另一个随机 div 并无限循环该过程。由于我是 jQuery 新手并且很困惑，我还想知道您对如何以最简单的方式将此过程放在 If Else 语句中的意见。比如我会得到一个数字的值

int num = 1;
If(num == 1){
<!-- Do the process-->
}
Else {
<!-- Do another process by selecting from another set of divs-->
}

代码如下：

    jQuery.fn.nextOrFirst = function (selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(document).ready(function () {
    $('div.mb').fadeOut(500);

    var fadeInTime = 1000;
    var intervaltime = 3000;
    setTimeout(function () {
        fadeMe($('div.mb').first());
    }, intervaltime);

    function fadeMe(div) {
        div.fadeIn(fadeInTime, function () {
            div.fadeOut(fadeInTime);
            setTimeout(function () {
                fadeMe(div.nextOrFirst());
            }, intervaltime);
        });
    }
});

分区：

 <div class="boxes">
      <div class="mb one">1-------------one</div>
      <div class="mb two">2-------------two</div>
      <div class="mb three">3-------------three</div>
 </div>

【问题讨论】：

标签： javascript jquery html random fade

【解决方案1】：

不确定这是否正是您想要的，但可以修改：

var mb = $('.mb'),   
mbl = mb.length;

mb.hide();
rand();

function rand(){
  var r = getRand(0, mbl);

  mb.eq(r).fadeIn('slow', function(){
    $(this).fadeOut('slow', function(){
      setTimeout(rand, 200);
    });
  });
}


function getRand(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

【讨论】：

嗨，汤姆，每次我在 JSFIDDLE 尝试这个时它都可以正常工作，但是当我将它传输到 html 文件时它就不起作用了。我觉得这很奇怪，或者我错过了什么或什么。你能帮帮我吗？
尝试将整个内容包装在 $(document).ready(function(){}); learn.jquery.com/using-jquery-core/document-ready
我是 jQuery 新手，多亏了你，现在我知道我必须先包装它才能工作。现在运行顺利！

【解决方案2】：

试试这样的，希望对你有帮助

     var c=$(".boxes div");
     setInterval(function(){

     $.each(c,function(a,z){
          $("div[class='"+(z.className)+"'").fadeIn();
     });

      var item = c[Math.floor(Math.random()*c.length)];
      var u=item.className;

      $("."+u).fadeOut();
      $("div[class='"+u+"'").fadeOut(1000);

   }, 3000);

编辑：

var c=$(".boxes div");
 setInterval(function(){
 $.each(c,function(a,z){
    $("div[class='"+(z.className)+"'").hide();
 });
 var item = c[Math.floor(Math.random()*c.length)];
 var u=item.className;
 $("."+u).fadeOut();
 $("div[class='"+u+"'").show().fadeIn(1000);

 }, 2000);

FIDDLE 链接：https://jsfiddle.net/bv0jj4wp/29/

【讨论】：

这个有效，但它显示了所有的 div 元素。如何一次只显示一个div？并在下一个 div 淡入之前设置一个间隔？
@vnylng 检查答案，我已经更新了它以及小提琴链接。如果您发现任何有用的答案，也请评价答案！
当有另一个 div 元素时，代码无法正常工作，只是更改我之前代码的选择器可能会更好。我以前的代码工作正常，但我的问题是如何使选择器随机。先生有什么想法吗？
@vnylng 好的，我可以做到，但是你能告诉我编辑的代码中有什么不工作吗，因为我在我的小提琴中添加了第 4 个 div，它工作正常。
现在工作正常。无论如何，如何为您的新更新添加间隔？我希望它淡入 4 秒，并在显示下一个随机 div 之前再间隔 4 秒。

【解决方案3】：

尝试将 nextOrFirst 函数更改为：

   jQuery.fn.nextOrFirst = function (selector) {
    var xCount = selector.size();   
    return  Math.floor(Math.random() * xCount ) + 1;
}

这不是获取第一个 div 的下一个，而是获取所有 div 的计数，并拍摄一个介于 1 和 X 之间的随机数（您的选择器的 div 数）

【讨论】：

我理解你的意思，但它不能使用上面的代码，你能在这里给我看一个例子jsfiddle.net 吗？
它只显示 1 个 div 并且不再显示。请问有什么更新吗？