CODEWITHSUNDEEP
jqueryscrollhoverjquery-animatenav
jamesmstone
jamesmstone

Reputation: 397

jQuery Hover nav animate scroll error

My goal is to have a menu that shrinks as you scroll down the page. But grows again when you hover over it.

I have been able to get the navigation to shrink, but I cant figure out how to get the navigation to grow again. I guess I have a syntax error somewhere.

If you can find a way to simplify my code please do so.

Here is my code:

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);


        }
    }
});

Sorry if its a really basic question I'm new to both javascript and jQuery.

Upvotes: 1

Views: 402

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

update

shorter code

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');
        }
    }
});

created a function 

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

to shorter your code

correct syntax of hover code

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

when hover big function works and mouseout checks if ($('body').scrollTop() > 0) that is if scrolling is done than we small the nav.

Upvotes: 1

Related Questions