jQuery Hover nav 动画滚动错误

Posted 2023-05-08

【中文标题】jQuery Hover nav 动画滚动错误

【英文标题】：jQuery Hover nav animate scroll error

【发布时间】：2013-08-23 06:07:51

【问题描述】：

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

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

如果你能找到一种方法来简化我的代码，请这样做。

这是我的代码：

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 都是新手。

【参考方案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 导航。

【讨论】：

感谢完美。你能解释一下你做了什么，因为我想了解更多吗？谢谢