jquery .animate 在我的网站上不起作用答案

【问题标题】：jquery .animate doesn't work on my websitejquery .animate 在我的网站上不起作用
【发布时间】：2021-10-26 08:24:47
【问题描述】：

我正在尝试让 jQuery 检测我的滑动，然后继续为我滚动。 jQuery 使用 touchswipe 检测到我的滑动，但动画不起作用。 innerHTML 部分有效。

我尝试了其他动画，例如更改高度和宽度，但仍然无法正常工作。

我使用的是 IOS Safari，所以我不知道它是否可以在 Chrome 上测试。

<ul id="sportCourtsRow">
  <div style="margin-left: 32vw;">
    {% for c in courtsB %}
      <li>
        <label>
          <input type="radio" name="sportCourts" class="sportCourts"><span class="sportsCourtsTxt">{{c}}</span>
        </label>
      </li>
    {% endfor %}
  </div>
</ul>

var swipebar = document.getElementById("sportCourtsRow");
$(swipebar).swipe({
  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
    if (distance > 80) {
      document.getElementById("monthTxt").innerHTML = "worked"; //test if swipe worked.
      $("#sportCourtsRow").animate({
        "marginLeft": "500px"
      }, "slow")
    }
  },
  threshold: 0
});

#sportCourtsRow {
  position: fixed;
  margin-top: 28vh;
  height: 6vh;
  width: 100vw;
  background-color: #dfdddd;
  border-bottom: 1px solid black;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.sportsCourtsTxt {
  font-family: 'alef';
  font-size: 2.5vh;
  margin-top: 1vh;
  margin-right: 100vw;
  text-align: center;
}

【问题讨论】：

标签： javascript html jquery css jquery-animate

【解决方案1】：

原来我使用的 JQuery 脚本不能正常工作。这是有效的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

【讨论】：