Question

我有一个有几个跨度的动画，我希望它们全部分开并且可以完全读取。

window.horizontalScroller = function($elem) {
  var left = parseInt($elem.css("left"));
  var temp = -1 * $('#horizontalScroller > div').height();
  if (left < temp) {
    left = $('#horizontalScroller').height()
    $elem.css("left", left);
  }
  $elem.animate({
    left: (parseInt(left) - 60)
  }, 11000, function() {
    window.horizontalScroller($(this))
  });
}


$(document).ready(function() {
  var i = 0;
  $("#horizontalScroller > span").each(function() {
    $(this).css("left", i);
    i += 60;
    window.horizontalScroller($(this));
  });
});

#horizontalScroller {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  overflow: hidden;
}

#horizontalScroller>span {
  position: absolute;
  border: 1px solid blue;
  display: inline-block;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontalScroller">
  <span>100 characteres</span>
  <span>110 characteres</span>
  <span>120 characteres</span>
  <span>130 characteres</span>
  <span>140 characteres</span>
  <span>150 characteres</span>
</div>

Answer 1

尝试将$(document).ready更新为如下所示：

$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller > span").each(function () {
          $(this).css("left", i);
          i += 100;
          window.horizontalScroller($(this));
    });
});

Answer 2

如果您只想将它们分开，那么您可以增加i：

$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller > span").each(function () {
        $(this).css("left", i);
        i += 110;
        window.horizontalScroller($(this));
    });
});

但是整个动画在一段时间后就会中断，所以我建议使用不同的方法或进行大量的优化。

我的跨度高于其他人

2 个答案: