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。

波纹动画无法正常工作

1 个答案: