连续的徽标走马灯

Question

我正在尝试让这个标志的轮播图自动连续运行。目前它仍然会在每个标志处停顿，然后再跳到下一个。

$(function() {
  // vars for clients list carousel
  // https://dev59.com/VlnUa4cB1Zd3GeqPaGvh
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 220); // 140px width for each client item 
  $clientcarousel.css('width', clientwidth);

  var rotating = true;
  var clientspeed = 0;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function() {
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function() {
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if (rotating != false) {
      var $first = $('#clients-list li:first');
      $first.animate({
        'margin-left': '-220px'
      }, 2000, function() {
        $first.remove().css({
          'margin-left': '0px'
        });
        $('#clients-list li:last').after($first);
      });
    }
  }
});

/*Logo carousel*/

#clients {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap {
  display: block;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clients">
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li>
        <img src="images/logos/BlaceAce-grayscale.png" alt="Black Ace">
      </li>
      <li>
        <img src="images/logos/WBPN-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/CA-grayscale.png" alt="Custom Aire">
      </li>
      <li>
        <img src="images/logos/GVAH-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/DM-grayscale.png" alt="Dakota Molding">
      </li>
      <li>
        <img src="images/logos/DP-grayscale.png" alt="Dakota Peat">
      </li>
      <li>
        <img src="images/logos/IH-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/EBC-grayscale.png" alt="Eastbay Campground">
      </li>
      <li>
        <img src="images/logos/NDTC-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Nutrena-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/NWB-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/RHS-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Sertoma-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/FSB-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/TM-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/TP-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/UC-TMC-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Vilandre-grayscale.png" alt="First State Bank">
      </li>
    </ul>
  </div>
  <!-- @end .clients-wrap -->
</div>
<!-- @end #clients -->

JSFIDDLE:

http://jsfiddle.net/yetanrj6/

- Keely

---

Fiddles非常适合帮助人们修改代码并验证解决方案，但您仍然需要在问题本身中发布所有相关代码。jsfiddle.com不太可能消失，但至少它可能会暂时关闭，或者fiddle本身随着时间的推移可能会被移动或删除。 - Chris Pratt

我已经将所有相关代码张贴在你的问题编辑中，供你进行编辑。 - Art Badger

@Chris Pratt - 对不起，我以前从未使用过jsfiddle，所以我不确定是否可以替换所有内容。问题已经更新。 - Keely

@Art Badger - 谢谢！ - Keely

Answer 1

您需要在 .animate() 中添加 "linear" 缓动效果。

第25行：

  $first.animate({ 'margin-left': '-220px' }, 2000, "linear", function() {

jsfiddle demo

- Joonas

---

你很棒！谢谢！ - Keely