Question

以下功能对我有用，但对悬停的反应非常慢。基本上我有一个位于页面中间的导航，有一个＆＃34;下拉＆＃34;然后当用户滚动到页面顶部时，导航变得粘滞，＆＃34;下降＆＃34; 34 ;.但就像我说的那样，对悬停的反应非常缓慢，我不知道为什么。

这是一个jsfiddle＆gt; http://jsfiddle.net/acrane/dgvj7Ls7/

和功能：

$('.main-navigation li a').hover(function() {

if ( $('.main-navigation').hasClass('main-nav-pos') ) {

$('.main-nav-pos li a').hover(
function() {
//display heading and caption
$(this).children('.nav-info').animate({"height":"100%"}, 100);
$(this).children('.nav-info').animate({"top":"-105%"}, 'fast');
$(this).children('.butterfly').css({"display":"block"}, 'slow');
},

function() {
//hide heading and caption
$(this).children('.nav-info').animate({"height":"0"}, 100);
$(this).children('.nav-info').animate({"top":"0%"}, 'fast');
$(this).children('.butterfly').css({"display":"none"}, 'slow');
}
);

} else {

$('.main-nav-fixed li a').hover(
function() {
    //display heading and caption
    $(this).children('.nav-info-fixed').animate({"height":"100%"}, 100);
    $(this).children('.nav-info-fixed').animate({"top":"105%"}, 'fast');
    },
function() {
    //hide heading and caption
    $(this).children('.nav-info-fixed').animate({"height":"0"}, 100);
    $(this).children('.nav-info-fixed').animate({"top":"0%"}, 'fast');
    }
    );
}
})

Answer 1

您在第一个.hover()期间添加了越来越多的$('.main-navigation li a').hover()处理程序，这会产生各种奇怪的行为和性能。

尝试用以下内容重写代码：

Updated fiddle

$('.main-navigation li a').hover(
    function() {
        if ( $('.main-navigation').hasClass('main-nav-pos') ) {
            //display heading and caption
            $(this).children('.nav-info').animate({"height":"100%"}, 100);
            $(this).children('.nav-info').animate({"top":"-105%"}, 'fast');
            $(this).children('.butterfly').css({"display":"block"}, 'slow');
        }
        else
        {
            //display heading and caption
            $(this).children('.nav-info-fixed').animate({"height":"100%"}, 100);
            $(this).children('.nav-info-fixed').animate({"top":"105%"}, 'fast');
        }
    },
    function() {
        if ( $('.main-navigation').hasClass('main-nav-pos') ) {
            //hide heading and caption
            $(this).children('.nav-info').animate({"height":"0"}, 100);
            $(this).children('.nav-info').animate({"top":"0%"}, 'fast');
            $(this).children('.butterfly').css({"display":"none"}, 'slow');
        }
        else 
        {
            //hide heading and caption
            $(this).children('.nav-info-fixed').animate({"height":"0"}, 100);
            $(this).children('.nav-info-fixed').animate({"top":"0%"}, 'fast');
        }
    }
);

jQuery悬停函数if / then真的很慢

1 个答案: