Условное утверждение JQuery не работает - PullRequest
Новая
       13

Условное утверждение JQuery не работает

0 голосов
/ 11 октября 2011

Вот мой код: 

// JavaScript Document
$(document).ready(function() {
row[1] = false;
row[2] = false;
row[3] = false;
row[4] = false;
row[5] = false;
row[6] = false;
$('.row1bback').fadeOut(0);
$('.row2bback').fadeOut(0);
$('.row3bback').fadeOut(0);
$('.row4bback').fadeOut(0);
$('.row5bback').fadeOut(0);
$('.row6bback').fadeOut(0);
function rowrfade() {
    var rRow = Math.ceil(Math.random() * 6);
    var rDelay = (Math.ceil(Math.random() * 20)) * 1000;
    rowfade(rRow, rDelay);
}
function rowfade(rRow, rDelay) {
  if (row[rRow] == false || row[rRow] == "") {
      $('.row'+ rRow + 'aback').delay(rDelay).fadeOut(10000);
      $('.row'+ rRow + 'bback').delay(rDelay).fadeIn(10000);
      return row[rRow] = true;
      rowrfade();
  } else if (row[rRow] == true) {
      $('.row'+ rRow + 'aback').delay(rDelay).fadeIn(10000);
      $('.row'+ rRow + 'bback').delay(rDelay).fadeOut(10000);
      return row[rRow] = false;
      rowrfade();
  }
}
    //row1fade();
    rowrfade();
});

Я пытаюсь случайным образом скрыть / показать 1 из 2 изображений для 6 строк. Я пытаюсь понять, как лучше всего заставить эту функцию работать.

Я хотел бы проверить, какая картинка отображается для случайного вызова строки. Если это изображение a (значение = ложь) или изображение b (значение = истина). Если показано изображение a, то затемните изображение a и покажите изображение b для этой строки. Этот цикл будет постоянно повторяться и повторяться.

Вот мой HTML-код: 

<div class="mframe">
  <div class="row1aback">
  </div>
  <div class="row1bback">
  </div>
  <div class="row2aback">
  </div>
  <div class="row2bback">
  </div>
  <div class="row3aback">
  </div>
  <div class="row3bback">
  </div>
  <div class="row4aback">
  </div>
  <div class="row4bback">
  </div>
  <div class="row5aback">
  </div>
  <div class="row5bback">
  </div>
  <div class="row6aback">
  </div>
  <div class="row6bback">
  </div>
</div>

Мои изображения используют свойство css для фонового изображения. У меня также есть всего 6 строк с 2 изображениями на строку. По умолчанию я показываю первое изображение и скрываю второе с помощью JS. Затем я случайно выбираю строку и случайную задержку от 1 до 20 секунд. Затем я использую это, чтобы изменить картинку в случайно выбранной строке. Я использую задержку, чтобы эффект казался случайным.

С тех пор я изменил свой код и использую следующий оператор условия, чтобы эта функция работала. Дайте мне знать, если вы знаете другой способ заставить его работать.

Спасибо. 

// JavaScript Document
$(document).ready(function() {
$('.row1bback').fadeOut(0);
$('.row2bback').fadeOut(0);
$('.row3bback').fadeOut(0);
$('.row4bback').fadeOut(0);
$('.row5bback').fadeOut(0);
$('.row6bback').fadeOut(0);
function rowrfade() {
    var rRow = Math.ceil(Math.random() * 6);
    var rDelay = (Math.ceil(Math.random() * 10)) * 1000;
    var fTimer = 6500;
    rstatus = $('.row' + rRow + 'aback').css('display');
    if (rstatus == 'block') {
        $('.row'+ rRow + 'aback').delay(rDelay).fadeOut(fTimer);
        $('.row'+ rRow + 'bback').delay(rDelay).fadeIn(fTimer, 
        function() {
            rowrfade()
        });
    } else if (rstatus == 'none') {
        $('.row'+ rRow + 'aback').delay(rDelay).fadeIn(fTimer);
        $('.row'+ rRow + 'bback').delay(rDelay).fadeOut(fTimer, 
        function() {
            rowrfade()
        });
    }
}
rowrfade();
});

1 Ответ

0 голосов
/ 11 октября 2011

Вам необходимо использовать обратные вызовы fadeIn и fadeOut для правильной работы этой функции, чтобы элемент не начал исчезать до того, как следующий элемент начнет исчезать.

Хранение массива таким способом не очень масштабируемо. В моем примере я храню все строки в объекте jquery и просто отслеживаю текущую строку.

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

Надеюсь, это поможет. 

<html>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var current = 0;
    var $rows = $('.row');

    $rows.each(function() {
        $(this).children(':last').hide();
    });

    function fade() {
        var newRow = null;
        do {
            newRow = Math.floor(Math.random() * $rows.length);
        } while(newRow === current);    

        var $row = $rows.eq(current);
        var $hide = $row.children(':visible');
        var $show = $row.children(':not(:visible)');

        $hide.fadeOut('slow');
        $show.fadeIn('slow', function() {
            current = newRow;
            fade();
        });
    }

    fade();
});

</script>
<div class="row">1: <span>A</span><span>B</span></div>
<div class="row">2: <span>A</span><span>B</span></div>
<div class="row">3: <span>A</span><span>B</span></div>
<div class="row">4: <span>A</span><span>B</span></div>
<div class="row">5: <span>A</span><span>B</span></div>
<div class="row">6: <span>A</span><span>B</span></div>
</html>
...