Javascript 未正确找到jQuery动画

我正在开发一个动态导航栏。但我对背景图像上的悬停动画有问题

有时，当鼠标使用.hover jquery函数离开元素时，它不起作用，背景图像也不消失

HTML

<div class="yizzbar-content">

            <nav class="yizzbar">

                <ul>
                    <li>
                        <span>
                            <div class="bkhover"></div>
                            <a href="./">Primera</a>
                        </span>
                    </li>
                    <li class="tablet">
                        <div class="bkhover"></div>
                        <span>Segunda desplegable</span>
                        <ul class="center">
                            <li>
                                <span>
                                    <a href="./">Segunda Primera</a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a href="./">Segunda Segunda</a>
                                </span>
                            </li>
                            <li>
                                <span>
                                    <a href="./">Segunda Tercera</a>
                                </span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>
                            <div class="bkhover"></div>
                            <a href="./">Tercera</a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <div class="bkhover"></div>
                            <a href="./">Cuarta</a>
                        </span>
                    </li>
                </ul>

            </nav>

        </div>

---

（此处为示例和完整代码）。

我尝试使用您的代码，这可能会按照您的要求工作：

添加

$（this）.find（'.bkhover'）.stop（true，true）以悬停方式指向您的手柄

像这样：

$('nav.yizzbar > ul > li').hover(
        function(){

            pos = $(this).position();
            pos = pos.top + 32;


            $(this).find('.bkhover')
            .css('top', pos + 'px')
            .css('width', $(this).width())
            .css('opacity', 0)
            .css('height', 0);

            $(this).find('.bkhover').animate({
                opacity: 1,
                height: '+=32px',
                top: '-=32px'
            }, 300, function() {
                $(this).find('.bkhover')
                .css('opacity', 1)
                .css('height', pos + 'px')
                .css('top', pos + 'px');
            });

        }, 
        function(){
        $(this).find('.bkhover').stop(true,true);
            $(this).find('.bkhover')
            .css('opacity', 0)
            .css('height', 0)
            .css('top', pos);
        });

非常感谢你。干得好！
$('nav.yizzbar > ul > li').hover(
        function(){

            pos = $(this).position();
            pos = pos.top + 32;


            $(this).find('.bkhover')
            .css('top', pos + 'px')
            .css('width', $(this).width())
            .css('opacity', 0)
            .css('height', 0);

            $(this).find('.bkhover').animate({
                opacity: 1,
                height: '+=32px',
                top: '-=32px'
            }, 300, function() {
                $(this).find('.bkhover')
                .css('opacity', 1)
                .css('height', pos + 'px')
                .css('top', pos + 'px');
            });

        }, 
        function(){
        $(this).find('.bkhover').stop(true,true);
            $(this).find('.bkhover')
            .css('opacity', 0)
            .css('height', 0)
            .css('top', pos);
        });