Question

这是我的代码：

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

我试图随机隐藏/显示6行中的2张图片中的1张。我试图了解使这个功能起作用的最佳方法。

我想查看为所谓的随机行显示的图片。如果是图片a（value = false）或图片b（value = true）。如果显示图片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();
});

Answer 1

您需要使用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>

JQuery条件语句不起作用

1 个答案: