jQuery 将菜单​​悬停状态和菜单活动状态的背景图像动画化

Question

我的菜单项有这个标记。我想使用 SVG 或动画背景图像作为悬停和活动状态。这是我的代码笔：

CODEPEN

我仍然无法让拱门落在每个菜单项的中间。我也试过 this link modified to my needs 但还是不能让它落在中心。

理想情况下，我想使用 svg 文件并对 arch 路径进行动画处理。但是找不到任何例子。

如果有人可以帮助我的原始代码并消除重复的背景，同时仍然保持线条，或者可以指出我可以从哪里开始的任何方向。

代码如下：

jQuery(function($){

    $('ul.menu-nav li').each(function(i) {
        
        var wt= $(this).width();
        var offset = $(this).offset();
        var rt = ($('ul.menu-nav').width() - ($(this).offset().left + $(this).outerWidth()));

        console.log(wt);
        //console.log(offset.left);
        console.log(rt);

        $(this).attr('data-width', wt);
        $(this).attr('data-rel', rt);
    });

        $( 'ul.menu-nav li' ).on( {
            mouseenter : function(e){
                var attachment = $( this ).attr( 'data-rel' );
                //var dwt = $( this ).attr( 'data-width' );
                //var distance = ($(attachment) + 10) + "px";
                //var parent = $( this ).attr( 'data-rel' );
                
                //$( 'div#' + attachment).addClass('active').siblings().removeClass('active');
                //$( this ).addClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', -attachment);
                 e.stopPropagation();
            },
            
            mouseleave : function(e) {
                var attachment = $( this ).attr( 'id' );
                //var parent = $( this ).attr( 'data-rel' );
                
                
                //$( this ).removeClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', 'center');
                //$( '.sub-menu').slideUp();
                 e.stopPropagation();
            }
       });

       /*$( 'ul.menu-nav li a' ).on( {
            mousedown : function(e){
                var url = $( this ).attr( 'href' );
                
                $( 'div' + url).addClass('active').siblings().removeClass('active');
                $( this ).parent().addClass('active').siblings().removeClass('active');
                //$( '.cp-line .cp-line-inner').css('background-position', -attachment);
                $('div' + url).fadeOut(function() {
                    // finished
                });
                e.stopPropagation();
            }
        });*/
});

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    transition: all 0.3s ease 0.3s;
}

.inner-header {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    align-items: center;
}

.drawer-menu {
    width:50%;
}

.inner-menu {
    position:relative;
    padding:0 40px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
}

ul.menu-nav li {

}

ul.menu-nav li a {

}

li#starting-point {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    opacity:0;
}

.site-branding {
    width: 50%;
    text-align: right;
    padding: 0 40px;
}

.site-branding a img {
    max-width: 320px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none;
}

.cp-line {
    width: 100%;
    height: 50px;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}


.cp-line-inner {
    width:100%;
    height:100%;
    border-bottom:1px solid;
  background-image:url('https://sp-gd.com/commonplace/wp-content/themes/spxcommonplace/assets/line.svg');
  background-position:center;
  background-size:contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="masthead" class="site-header">
        <div class="inner-header">

            <div class="drawer-menu">
                <div class="inner-menu">
                    <ul class="menu-nav">
                        <li><a href="#work" data-bg="<?php the_field('background_colour', 10); ?>">Work</a></li>
                        <li><a href="#interesting" data-bg="<?php the_field('background_colour', 12); ?>">Interesting</a></li>
                        <li><a href="#useful" data-bg="<?php the_field('background_colour', 14); ?>">Useful</a></li>
                        <li><a href="#about" data-bg="<?php the_field('background_colour', 16); ?>">About</a></li>
                        <li><a href="#contact" data-bg="<?php the_field('background_colour', 18); ?>">Contact</a></li>
                        <li id="starting-point" class="current_item">STARTING</li>
                    </ul>
                </div>
            </div>
            
            <!-- #site-navigation -->

            <div class="site-branding">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a>
            </div><!-- .site-branding -->

            <div class="cp-line">
                <div class="cp-line-inner">
                    
            </div>
        </div>

    </header><!-- #masthead -->

Answer 1

在css中：

.cp-line-inner {
    background-repeat: repeat-x;
}

在javascript中，重新计算rt变量：

var rt = ($(window).width()/2 - $(this).offset().left - wt / 2);

这是我的代码笔：https://codepen.io/ng2hunglong/pen/abLvWpY