javascript - 波纹动画无法正常工作

Question

我正在关注 this向下拉菜单的每个元素添加 波纹 动画的教程。问题是我可以制作动画，但它会扩展到整个页面(不限于菜单项)，而不是教程中显示的方式。这是我的做法:

Javascript:

$(function(){
              var ink, d, x, y;
              $(".sub-menu li a").click(function(e){
                if($(this).find(".ink").length === 0){
                  $(this).prepend("<span class='ink'></span>");
                }

                ink = $(this).find(".ink");
                ink.removeClass("animate");

                if(!ink.height() && !ink.width()){
                  d = Math.max($(this).outerWidth(), $(this).outerHeight());
                  ink.css({height: d, width: d});
                }

                x = e.pageX - $(this).offset().left - ink.width()/2;
                y = e.pageY - $(this).offset().top - ink.height()/2;

                ink.css({top: y+'px', left: x+'px'}).addClass("animate");
            });
        });

还有我的菜单:

<div id="skenav" class="ske-menu"><ul id="menu-main" class="menu sf-js-enabled sf-arrows"><li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-269"><a href="http://localhost:8888/grafixlab/">Home</a></li>
    <li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-273 has_child"><span class="this_child"></span><a href="http://localhost:8888/grafixlab/grafixlab/" class="sf-with-ul">Grafixlab</a>
    <ul class="sub-menu">
        <li id="menu-item-306" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-306"><a href="#"><span class="ink animate" style="height: 200px; width: 200px; top: -77px; left: -41.6875px;"></span>Test</a></li>
        <li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="http://localhost:8888/grafixlab/grafica/">Grafica</a></li>
        <li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://localhost:8888/grafixlab/web/">Web</a></li>
        <li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://localhost:8888/grafixlab/video/">Video</a></li>
        <li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="http://localhost:8888/grafixlab/didattica/">Didattica</a></li>
    </ul>
    </li>
    </ul>
</div>

我做错了什么？

Answer 1

查看教程，这应该是一个有效的解决方案:

在您的 CSS 代码中将 overflow: hidden; 添加到 .sub-menu li a。