CODEWITHSUNDEEP
jqueryanimationheight
Miguel
Miguel

Reputation: 1897

Jquery animation height problems

Hello i seriously don't know why this isn't working, the alert works but the animation doesn't. Already tried with mouseover() and mouseenter() please some tips:

<body>
    <div id ="upBar"></div>
    <div id ="middleBar"></div>
    <div id="middleImg"></div>
    <div id ="wrapper">
        <header>
                <nav>
                    <a href="index.html"><img id="logo" src="imgs/logo.png"></a>
                    <ul>
                        <li id ="lang"><a href="#">PT</a> / <a href="#">EN</a></li>
                        <a href="#"><li>Notícias</li></a>
                        <a href="#"><li>Logistica</li></a>
                        <a href="#"><li>Serviços</li></a>
                        <a href="#"><li>Quem Somos</li></a>
                    </ul>
                </nav>
        </header>

CSS

#upBar {
    background-color: #FFF;
    opacity: 0.9;
    width: 100%;
    height: 45px;
    position: fixed;
    z-index: 1;
}

jQuery

$(document).ready(function(){
    alert('ready');
    $('#upBar').hover(function(){
        $(this).stop(true).animate(function(){
            height: '60px'
        },300);
    })
})

Upvotes: 0

Views: 85

Answers (1)

Satpal
Satpal

Reputation: 133403

.animate(), functions first parameter is properties which is An object of CSS properties and values that the animation will move toward.

Use

$(document).ready(function(){
    alert('ready');
    $('#upBar').hover(function(){
        $(this).stop(true).animate({ //<- notice no 'function'
            height: '60px'
        },300);
    })
})

Upvotes: 1

Related Questions