JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery Plug-In Twinkle function Example</h1>
<p>Look me twinkle!</p>
<button id='startBtn'>Click me to start twinkle</button>

JavaScript

//自製jQuery Plug-In
(function ($) {
    $.fn.extend({
        //閃爍範例
        twinkle: function (options) {
            //預設參數
            var defaultOptions = {
                times: 5,    //閃爍次數(先亮再暗算一次)
                period: 500, //閃爍間隔(亮與暗的間隔)
                callback: function (target) {}  //執行完閃爍後要執行的callback
            };
            $.extend(defaultOptions, options);  //覆蓋自訂的參數到預設參數中
            //使用return傳回jQuery物件，使其Plug-In使用時擁有串接特性
            return this.each(function () {      //這裡的this是jQuery物件，each()裡的是
                                                //JavaScript的DOM物件
                var target = $(this);           //取得各別DOM物件的jQuery物件
                var originalVisibilityStatus = $(this).css('visibility'); //取得原來的visibility css屬性
                var currentTimes = 0;           //現在的回數
                startTwinkle();

                function startTwinkle() {
                    if (currentTimes < defaultOptions.times) {
                        lighten();
                        //間隔一段時間後變暗，回數加一
                        setTimeout(function () {
                            darken();
                            currentTimes++;
                            //間隔一段時間後遞迴呼叫自己startTwinkle
                            setTimeout(function () {
                                startTwinkle();
                            }, defaultOptions.period);
                        }, defaultOptions.period);
                    } else {
                        //將target的visibility css屬性設回原來的值，執行callback function
                        target.css('visibility', originalVisibilityStatus);
                        defaultOptions.callback(target);
                    }
                }

                function lighten() {
                    target.css('visibility', 'visible');
                }

                function darken() {
                    target.css('visibility', 'hidden');
                }
            });
        }
   ...