CODEWITHSUNDEEP
jqueryhtmlcss
dertzi
dertzi

Reputation: 79

Navigation bar moves downward when jQuery animates

I've been learning HTML/CSS/jQuery for the past ten days. I'm creating my first website and trying to play around as much as I can.

I made an animation for my navigation bar. It changes the color and the font-size is increased by 2px. The increase in font-size causes the rest of the navigation bar to drop down a few pixels. How can I fix this?

Here's a jsFiddle of my project.

The animation:

$(document).ready(function () {
    $('a').hover(function () {
        $(this).stop().animate({
            "color": "#FFA541",
            "font-size": "25px"
        }, 275);
    }, function () {
        $(this).stop().animate({
            "color": "white",
            "font-size": "23px"
        }, 275);
    });
});

Upvotes: 1

Views: 66

Answers (2)

Stiger
Stiger

Reputation: 1199

make the <li> float, please try this: html:

<div class="navigation">
<ul>
    <li><a href="#">Home</a>

    </li>
    <li><a href="#">HTML</a>

    </li>
    <li><a href="#">CSS</a>

    </li>
    <li><a href="#">jQuery</a>

    </li>
    <!-- add this line -->
    <div style="clear: both"></div>
</ul>

Css:

.navigation ul {
    display: block;
    width: 70%;
    margin: 0 auto;
}

.navigation ul li {
    float: left;
}

Upvotes: 0

Kai Qing
Kai Qing

Reputation: 18833

.navigation ul li a {
    text-decoration: none;
    margin: .2em 1em;
    color: white;
    width: 100px;
    line-height:25px;
}

Add a line-height to the a tags. Set this to whatever the highest point will be.

Here's an update to your fiddle: http://jsfiddle.net/Lhbys/1/

Upvotes: 2

Related Questions