jQuery 涟漪效果未显示

Question

使用 Jquery Ripple 效果库，我尝试将给定效果应用为 CSS 类元素。我使用的是 WordPress 开发环境，并且添加了函数 run (functions.php)，但是当我创建元素时，我的效果没有显示，例如：

<div class="ripples-effect">
<!-- Your content here -->

我检查了控制台，没有出现jquery错误等错误。

function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');

    // Enqueue jQuery Ripples JS
    wp_enqueue_script('jquery-ripples', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js', array('jquery'), '0.5.3', true);
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".ripples-effect").ripples({
                resolution: 512,
    dropRadius: 20,
  perturbance: 5,
            });
        });
    </script>
    <?php
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Answer 1

这在下面的示例中运行良好。如果将光标移到 div 上，您可以看到波纹效果。

jQuery('.ripples-effect').ripples({
  resolution: 512,
  dropRadius: 20, //px
  perturbance: 0.04,
});

.ripples-effect {
   background: url(https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg);
   background-size: cover;
   background-position: 50% 0;
   height: 100vh;
   color: #fff;
   text-align: center;
   padding: 100px; 
}

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

<div class="ripples-effect">
   Your content here
</div>