jQuery Ripples波纹效果不显示问题求助

问题情况 #

在WordPress开发环境中使用jQuery Ripples库，尝试给带有ripples-effect类的div元素添加水波特效，但效果未显示。已在functions.php中添加脚本加载逻辑，控制台无jQuery相关报错。

用到的HTML结构：

<div class="ripples-effect">
<!-- 自定义内容 -->
</div>

原functions.php代码：

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');

解决步骤 #

1. 满足元素样式要求 #

jQuery Ripples特效对目标元素有强制样式约束，缺少则无法正常渲染：

• 元素必须设置非static定位（推荐position: relative）
• 元素需要有背景（纯色或背景图均可，特效基于背景层渲染）

添加CSS样式：

.ripples-effect {
    position: relative;
    background-color: #f0f0f0; /* 替换为你需要的背景色/背景图 */
    overflow: hidden; /* 可选，防止波纹溢出元素边界 */
}

2. 修正脚本加载方式 #

WordPress中不建议直接在wp_enqueue_scripts钩子内输出内联脚本，易出现加载顺序问题。改用wp_add_inline_script绑定内联脚本，确保依赖加载完成后再执行：

修改后的functions.php代码：

function enqueue_custom_scripts() {
    // WordPress自带jQuery，无需重复注册
    wp_enqueue_script('jquery');

    // 加载jQuery Ripples，依赖jQuery
    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);

    // 编写内联初始化脚本，绑定到jquery-ripples的加载完成事件
    $ripple_init_script = 'jQuery(document).ready(function($) {
        $(".ripples-effect").ripples({
            resolution: 512,
            dropRadius: 20,
            perturbance: 0.05 // 取值范围0-1，原代码的5超出范围导致特效失效
        });
    });';
    wp_add_inline_script('jquery-ripples', $ripple_init_script);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

3. 修正参数错误 #

注意perturbance参数的合法取值范围是0到1，原代码中设置的5会直接导致特效失效，需调整为0.05这类合理值。

4. 验证元素选中状态 #

在浏览器控制台执行$(".ripples-effect")，检查是否能正确选中目标元素：

• 如果返回空数组，说明元素不存在或类名拼写错误
• 如果元素是动态生成的（比如通过AJAX加载），需要在元素渲染完成后再调用.ripples()方法

内容的提问来源于stack exchange，提问作者SavPhill