我如何使用代码块而不重新重写它

问题描述

如何重用一块 jquery 代码而不重新重写它例如我得到了这个动画并且想在另一行中重复它

    $("#sign_up_btn").mouseenter(function(){
        $("#sign_up_btn").animate({ opacity: "0.5" },300);
        $("#sign_up_btn").animate({ fontSize: "200%" },300);
      });
    $("#sign_up_btn").mouseleave(function(){
        $("#sign_up_btn").animate({ opacity: "0.2" },300);
        $("#sign_up_btn").animate({ fontSize: "100%" },300);
      });

解决方法

创建一个函数。

也很干（不要重复自己）

const anim = function(e) {
  const enter = e.type === "mouseenter";
  $(this)
    .animate({ opacity: enter ? "0.5" : "0.2"},300)
    .animate({ fontSize: enter ? "200%" : "100%" },300); // can possibly be merged
};

$("#sign_up_btn").on("mouseenter mouseleave",anim);

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

jquery rewriting