jQuery Ripplesのプラグインを使用して波紋のアニメーションを動かしたいのですがうまく動作しません

Question

下記のリンクを参考に一定時間表示させて消える波紋アニメーションを実装しようとしているのですがうまく動作しません、文法、記述方法が誤っているのでしょうか。
ご回答いただけますと幸いです。
https://arutega.jp/jquery-ripples/
https://arutega.jp/jquery-ripples/

    <script src="<?php echo TMP_URL; ?>/js/jquery.ripples.js"></script>
    <script>
        $(document).ready(function() {
            /* ===== Op ===== */
            try {
                $('.ripples').ripples({
                    resolution: 128,
                    dropRadius: 20, //px
                    perturbance: 0.04,
                    interactive: false
                });
            }
            catch (e) {
                $('.error').show().text(e);
            }
        
            $('.js-ripples-disable').on('click', function() {
                $('.ripples').ripples('destroy');
                $(this).hide();
            });
        
            $('.js-ripples-play').on('click', function() {
                $('.ripples').ripples('play');
            });
        
            $('.js-ripples-pause').on('click', function() {
                $('.ripples').ripples('pause');
            });
        
            // Automatic drops
            setInterval(function() {
                var $el = $('.ripples');
                var x = Math.random() * $el.outerWidth();
                var y = Math.random() * $el.outerHeight();
                var dropRadius = 40;
                var strength = 0.44 + Math.random() * 0.84;
        
                $el.ripples('drop', x, y, dropRadius, strength);
            }, 1400);
                $('body').hide();
                $('body').fadeIn(1400);
            });

    </script>
 <div class="ripples"></div>

Answer 1

自己解決しました、下記のように書き換えて動作確認できました。

       jQuery(function($){
        $(document).ready(function() {
            /* ===== Op ===== */
            try {
                $('.ripples').ripples({
                    resolution: 128,
                    dropRadius: 20, //px
                    perturbance: 0.04,
                    interactive: false
                });
            }
            catch (e) {
                $('.error').show().text(e);
            }
        
            $('.js-ripples-disable').on('click', function() {
                $('.ripples').ripples('destroy');
                $(this).hide();
            });
        
            $('.js-ripples-play').on('click', function() {
                $('.ripples').ripples('play');
            });
        
            $('.js-ripples-pause').on('click', function() {
                $('.ripples').ripples('pause');
            });
        
            // Automatic drops
            setInterval(function() {
                var $el = $('.ripples');
                var x = Math.random() * $el.outerWidth();
                var y = Math.random() * $el.outerHeight();
                var dropRadius = 40;
                var strength = 0.44 + Math.random() * 0.84;
        
                $el.ripples('drop', x, y, dropRadius, strength);
            }, 1400);
                $('body').hide();
                $('body').fadeIn(1400);
            });
        });