Javascript - 复制淡入淡出

时间:2016-09-26 11:43:39

标签: javascript css function animation fade

我试图让不同的引号淡入和淡出正文副本,但也要将它们保持在同一行。目前,报价只会出现一个单独的行,而不是之前的行。



layout-sw720dp

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
  overflow: hidden;
  white-space: nowrap;
}
.intro {
  width: 800px;
  overflow: hidden;
  white-space: nowrap;
}
.h2 {
  overflow: hidden;
  display: inline;
}
.intro h1,
.intro h2 {
  overflow: hidden;
  vertical-align: top;
  font-size: 24px;
}
.intro h1 {
  font-weight: bold;
}




http://jsfiddle.net/n4mKw/4220/

1 个答案:

答案 0 :(得分:2)

只需将<table class="table"> <thead> <th>#($index)</th> <th>L #</th> <th>C Name</th> <th>A #</th> <th>F P</th> </thead> <tbody ng-repeat="d in displayData" > <tr ng-repeat="a in d.f_p track by $index" > <td>{{($parent.$index*d.f_p.length)+($index+1)}}</td> <td>{{d.lId}}</td> <td>{{d.cName}}</td> <td>{{$index+1}}</td> <td>{{a}}</td> </tr> </tbody> </table> $scope.displayData=[{"lId": "369857","cName": "ABCD","f_p":0.04401,0.04402,0.04403]},{"lId": "369858","cName": "BCDE", "f_p":[0.04401,0.04402,0.04403,0.04404]},{"lId": "369859","cName": "CDEF", "f_p":[0.04401,0.04402,0.04403,0.04404,0.04405]}]; 添加到此块:

display: inline

示例...

.intro h1,
.intro h2 {
  overflow: hidden;
  vertical-align: top;
  font-size: 24px;
  display: inline;
}
(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();
.quotes {
  display: none;
  overflow: hidden;
  white-space: nowrap;
}

.intro {
  width: 800px;
  overflow: hidden;
  white-space: nowrap;
}

.intro h1,
.intro h2 {
  overflow: hidden;
  vertical-align: top;
  font-size: 24px;
  display: inline;
}

.intro h1 {
  font-weight: bold;
}