ボタンのアニメーションが発火しません

前提・実現したいこと

Ruby on Railsでwebアプリを作っています。

ボタンを押下した時に跳ねるようなアニメーションを実装中に以下の問題が発生しました。

発生している問題

イベントが何も起こりません。

該当のソースコード

view
1<td class="sympathy-btn"><%= render "public/sympathies/sympathy-btn", post: post %><div class="shadow"></div></td>
2
3部分テンプレート
4<% if post.sympathied_by?(current_customer) %>
5  <%= link_to post_sympathies_path(post), method: :delete, remote: true, class: "expand" do %>
6    <%= image_tag("sympathy.jpeg", size:"20x20") %>
7  <% end %>
8  <%= post.sympathies.count %>
9<% else %>
10  <%= link_to post_sympathies_path(post), method: :post, remote: true, class: "expand" do %>
11    <%= image_tag("sympathy.jpeg", size:"20x20") %>
12  <% end %>
13  <%= post.sympathies.count %>
14<% end %>

scss
1.sympathy-btn .cheer-btn {
2  font-family: Source Sans Pro;
3  font-size: 1rem;
4  line-height: 3.5em;
5  padding: 0 1.5em;
6  background: gold;
7  box-shadow: inset 0 -.125rem rgba(0,0,0,.2);
8  color: black;
9  border-radius: 5em;
10  cursor: pointer;
11  user-select: none;
12  transform-origin: 100% 100%;
13
14  &:focus { outline: 0; }
15}
16.shadow {
17  margin-top: -.325rem;
18  width: 100%;
19  height: .75rem;
20  background: radial-gradient(closest-side, gainsboro, transparent);
21  opacity: 0;
22}

js
1$("sympathy-btn").mousedown(function(){
2  console.log("test")
3  // マウスのボタンが押されたときに発生するイベント
4  // 同じようなイベントとしてマウスが押されて離されたときに発生する click イベントがある
5  $(this).html("sympathy.jpeg").velocity({
6    // velocity:jQueryのプラグイン。高機能で非常に軽快なアニメーションをする。
7    backgroundColorRed : "0",
8    translateY: "-1.5rem",
9    rotateZ: "-10deg"
10  }, 100, "easeOut").velocity({
11    rotateZ: "8deg",
12  }, 150).velocity({
13    translateY: "0",
14    rotateZ: "0"
15  }, 600, "easeOutBounce");
16
17  $("+ .shadow", this).velocity({
18    scale: "1.3",
19    opacity: "1"
20  }, 150).velocity("reverse", 600, "easeOutBounce");
21
22});
23
24$("cheer-btn").mousedown(function(){
25  $(this).html("Recommended").velocity({
26    backgroundColorRed : "0",
27    translateY: "-1.5rem",
28    rotateZ: "-10deg"
29  }, 100, "easeOut").velocity({
30    rotateZ: "8deg",
31  }, 150).velocity({
32    translateY: "0",
33    rotateZ: "0"
34  }, 600, "easeOutBounce");
35
36  $("+ .shadow", this).velocity({
37    scale: "1.3",
38    opacity: "1"
39  }, 150).velocity("reverse", 600, "easeOutBounce");
40
41});

試したこと

https://deshinon.com/2019/03/02/omosiro-sugoi-button-css/
上記のサイトのぴょこんとするボタンを参考にしました。

html
1<figure>
2  <button>Recommend</button>
3  <div class="shadow"></div>
4</figure>

scss
1@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
2
3* {
4  box-sizing: border-box;
5  margin: 0;
6  border: 0;
7}
8
9html, body { height: 100%; }
10body {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  background: whitesmoke;
15}
16
17button {
18  font-family: Source Sans Pro;
19  font-size: 1rem;
20  line-height: 3.5em;
21  padding: 0 1.5em;
22  background: gold;
23  box-shadow: inset 0 -.125rem rgba(0,0,0,.2);
24  color: black;
25  border-radius: 5em;
26  cursor: pointer;
27  user-select: none;
28  transform-origin: 100% 100%;
29  
30  &:focus { outline: 0; }
31}
32
33.shadow {
34  margin-top: -.325rem;
35  width: 100%;
36  height: .75rem;
37  background: radial-gradient(closest-side, gainsboro, transparent);
38  opacity: 0;
39}

js
1$("button").mousedown(function(){
2  $(this).html("Recommended").velocity({
3    backgroundColorRed : "0",
4    translateY: "-1.5rem",
5    rotateZ: "-10deg"
6  }, 100, "easeOut").velocity({
7    rotateZ: "8deg",
8  }, 150).velocity({
9    translateY: "0",
10    rotateZ: "0"
11  }, 600, "easeOutBounce");
12  
13  $("+ .shadow", this).velocity({
14    scale: "1.3",
15    opacity: "1"
16  }, 150).velocity("reverse", 600, "easeOutBounce");
17
18});