Question

我的目标是在向下滚动页面时缩小菜单。但是当你将鼠标悬停在它上面时会再次增长。

我能够让导航缩小，但 我无法想象 如何让导航再次增长。我想我在某处有语法错误。

如果您可以找到简化我的代码的方法，请执行此操作。

这是我的代码：

JS Fiddle my attempt at hover ( stuffs up scroll effect)

JS Fiddle working version of scroll effect no hover

HTML

<nav> 
 <a href="">Page 1</a>
 <a href="">Page 2</a>
 <a href="">Page 3</a>
 <a href="">Page 4</a>
 <a href="">Page 5</a>
 <a href="">Page 6</a>
 </nav>
<div style="height:2000px;"></div>

JS

$(function () {
    $('nav').data('size', 'big');
});

$('nav').hover(function () {
    $('nav').data('size', 'big');
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});
}),function () {
    $('nav').data('size', 'small');
   var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});


$(window).scroll(function () {
    var $nav = $('nav');
    var $a = $('nav > a');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size', 'small').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);
            $a.data('size', 'small').stop().animate({
                height: '20px',
                    'line-height': '20px'
            }, 300, false);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size', 'big').stop().animate({
                height: '100px',
                    'line-height': '100px'
            }, 300, false);
            $a.data('size', 'big').stop().animate({
                height: '40px',
                    'line-height': '40px'
            }, 300, false);


        }
    }
});

很抱歉，如果这是一个非常基本的问题，我对javascript和jQuery都不熟悉。

Answer 1

DEMO

$('nav').hover(function () {
    var $nav = $('nav');
    var $a = $('nav > a');
    $nav.data('size', 'big').stop().animate({
        height: '100px',
            'line-height': '100px'
    }, 300, false);
    $a.data('size', 'big').stop().animate({
        height: '40px',
            'line-height': '40px'
    }, 300, false);

},

function () {
    if ($('body').scrollTop() > 0) {
        var $nav = $('nav');
        var $a = $('nav > a');
        $nav.data('size', 'small').stop().animate({
            height: '40px',
                'line-height': '40px'
        }, 300, false);
        $a.data('size', 'small').stop().animate({
            height: '20px',
                'line-height': '20px'
        }, 300, false);
    }
});

<强>更新

更短的代码

DEMO

$(function () {
    $('nav').data('size', 'big');
});

function change(date_size, nav_size, a_size) {
    var $nav = $('nav');
    var $a = $('nav > a');
    $nav.data('size', date_size).stop().animate({
        height: nav_size,
            'line-height': nav_size
    }, 300, false);
    $a.data('size', date_size).stop().animate({
        height: a_size,
            'line-height': a_size
    }, 300, false);
}

$('nav').hover(function () {
    if ($('body').scrollTop() > 0) {
        change('big', '100px', '40px');
    }
},

function () {
    if ($('body').scrollTop() > 0) {
        change('small', '40px', '20px');
    }
});



$(window).scroll(function () {
    var $nav = $('nav');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            change('small', '40px', '20px');
        }
    } else {
        if ($nav.data('size') == 'small') {
            change('big', '100px', '40px');
        }
    }
});

创建了一个函数

function change(date_size, nav_size, a_size) {
        var $nav = $('nav');
        var $a = $('nav > a');
        $nav.data('size', date_size).stop().animate({
            height: nav_size,
                'line-height': nav_size
        }, 300, false);
        $a.data('size', date_size).stop().animate({
            height: a_size,
                'line-height': a_size
        }, 300, false);
}

缩短你的代码

正确的悬停代码语法

$('nav').hover(function(){},function(){});

当悬停big功能有效且mouseout检查if ($('body').scrollTop() > 0)时，如果滚动完成的时间比我们导航的small。

jQuery Hover nav动画滚动错误

1 个答案: