选择随机 div 自动淡入淡出

Question

目前，通过选择 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>

Answer 1

尝试将 nextOrFirst 函数更改为如下内容：

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

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

Answer 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 LINK: https://jsfiddle.net/bv0jj4wp/29/

Answer 3

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

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);
}

选择随机 div 自动淡入淡出

Selecting random div for auto fade in and fade out

javascript

jquery

html

random

fade