Derzeit wird dieser Code automatisch ein- und ausgeblendet, indem das div-Element so ausgewählt wird, wie es angeordnet wurde (aufeinanderfolgende Reihenfolge). Was ich jetzt tun möchte, ist, den Selektor zufällig zu machen, ich möchte ein zufälliges Div einblenden und nach dem Ausblenden wählt es ein anderes zufälliges Div und eine Endlosschleife des Prozesses. Da ich neu in jQuery bin und so verwirrt bin, möchte ich auch Ihre Meinung dazu wissen, wie Sie diesen Prozess auf einfachste Weise in eine If Else-Anweisung einfügen können. Wie zum Beispiel werde ich den Wert einer Zahl erhalten

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

Hier ist der Code:

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

Divs:

 <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>
2
vnylng 18 Aug. 2015 im 18:03

3 Antworten

Beste Antwort

Sie sind sich nicht sicher, ob dies genau das ist, was Sie möchten, können aber geändert werden:

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);
}
0
Tom Millard 18 Aug. 2015 im 17:11

Versuchen Sie so etwas, hoffe es hilft

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

BEARBEITEN:

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/

0
Varun 18 Aug. 2015 im 16:21

Versuchen Sie, die nextOrFirst-Funktion in Folgendes zu ändern:

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

Anstatt die nächste der ersten Divs zu erhalten, werden alle Divs gezählt und es wird eine Zufallszahl zwischen 1 und X angezeigt (die Anzahl der Divs mit Ihrem Selektor).

0
Mark 18 Aug. 2015 im 15:17