如何在jQuery中向下滑动按钮

Question

我的应用程序中有提交按钮。当用户单击提交按钮时。我想要jQuery或CSS中的向下滑动提交按钮。有人能建议怎么做吗？

感谢

Answer 1

只要用户单击按钮元素，就可以使用以下方法之一将类应用于按钮元素：

查询

$("button").on("click", () => {
$("button").addClass("clicked");
})

button {
transition: transform 300ms ease
}
.clicked {
transform: translateY(200px)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Submit</button>

没有Jquery

const button = document.querySelector("button");
button.addEventListener("click", () => {
button.classList.add("clicked")
})

button {
transition: transform 300ms ease
}
.clicked {
transform: translateY(200px)
}

<button>Submit</button>

Answer 2

$(".button").click(function(e){
$(this).slideDown();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">button</button>