с проблемами, проходящими через элементы, используя цикл while

Question

Я хотел бы пройти через коллекцию div и случайным образом выцветать, когда срабатывает событие клика, но на данный момент мне нужно постоянно щелкнуть, чтобы полностью вытеснить остальные div. Я бы предпочел щелкнуть div, и все его divs случайно исчезнут. Я добавил некоторые console.logs в цикл while, и все, кажется, работает нормально, проблема в том, что я пытаюсь затухать фактические элементы. Если бы кто-нибудь мог помочь, это было бы здорово?

Fiddle здесь: http://jsfiddle.net/kyllle/sdpzJ/7/

Answer 1

Решили выбросить это там тоже. Упрощенный.

$(function() { 
    var $ctn = $('#container .ctn'); 

    function randomFadeOut() { 
     var $r = $ctn.not($(this)); 
     var e = 0; 
     while (e < $ctn.length) { 
      $r.eq(e).delay(Math.random() * 500).animate({ opacity: 0 }); 
      e++; 
     } 
    } 

    $ctn.hide().click(randomFadeOut).each(function(v) { 
     $(this).delay(50 * v).fadeIn(); 
    }); 
}); 

---

http://jsfiddle.net/sdpzJ/15/

Answer 2

Ваш генератор случайных чисел вне Вашего цикла - так что вы получите только одно случайное число снова и снова.

Попробуйте это:

function randomFadeOut(i){ 
     var random  
     for (var e=0;e<ctnLength;e++) { 
      random = Math.floor(Math.random() * ctnLength); 
      $(ctn[random]).not(i).animate({ opacity : 0 }); 
     }   
    } 

Конечно, так как это является случайным, одни и те же клетки могут быть выбраны более чем один раз, что оставит ряд ячеек позади.

Answer 3

Я не уверен, если я понимаю ваш вопрос, но вот одно из возможных решений:

function randomFadeOut(i){ 
    var random; 
    var e = 0; 
    while (e < ctnLength) { 
     random = Math.random() * 1000; 
     $(ctn[e]).not(i).delay(random).animate({ opacity : 0 }); 
     e++; 
    }   
} 

Это будет исчезать все дивы в случайные моменты времени, когда вы нажимаете на один.

I updated your fiddle here.

Answer 4

Вот лучше и эффективнее randomFade функция:

function randomFadeOut(i){   
    var tmp = ctn.toArray(); 
    tmp.sort(function(){ return Math.floor(Math.random()*3) -1; }); 
    for(var i=0; i<tmp.length; ++i){ 
     $(tmp[i]).delay(100 * i).fadeOut(); 
    } 
} 

Таким образом, вы только идти один раз через массив я обновил свою скрипку с ним, а также, чтобы увидеть его в действии :)