javascript - 未正确找到 jQuery 动画

Question

我正在开发一个动态导航栏。但是我在背景图像上悬停动画时遇到问题。

有时，当鼠标使用 .hover jquery 功能移出元素时，它不起作用并且背景 iamge 不会消失。

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>

Javascript

$(document).ready(function() {

    mouse = false;
    element = null;
    pos = 0;

    $('nav.yizzbar li.tablet').mouseover(function(){
        mouse = true;
    });

    $('nav.yizzbar li.tablet').click(function(){
        if(!mouse){
            $(this).find('ul').toggle();
        }
    });

    $('nav.yizzbar li li').hover(
        function(){
            if(!mouse){
                $(this).find('span').fadeOut(1).fadeIn(300);
                mouse = true;
            } 
        }, 
        function(){
            if(mouse){
                mouse = false;
            }    
        });

    $('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(){

            $('.bkhover')
            .css('opacity', 0)
            .css('height', 0)
            .css('top', pos);
        });

});

http://www.yizztech.com/navbar/

http://yizztech.com/navbar/js/jquery.yizzbar-1.0.js

（示例和完整的代码在这里）。

Answer 1

我尝试了您的代码，这可能会像您想要的那样工作：

$(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);
        });