jquery箭头特效代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Arrow Effect</title>
<style>
  .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #000;
    margin-left: 5px;
    transition: transform 0.3s ease;
  }
  .arrow.animate {
    transform: translateX(10px);
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="arrowButton">Click Me</button>
<span class="arrow"></span>

<script>
$(document).ready(function() {
  $('#arrowButton').click(function() {
    $('.arrow').toggleClass('animate');
    setTimeout(function() {
      $('.arrow').toggleClass('animate');
    }, 300); // 与CSS中的transition时间保持一致
  });
});
</script>

</body>
</html>