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

Posted 2023-05-08

【中文标题】jquery .animate 在我的网站上不起作用

【英文标题】：jquery .animate doesn't work on my website

【发布时间】：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;

【参考方案1】：

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

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