當jQuery動畫時導航欄向下移動

過去十天我一直在學習HTML/CSS/jQuery。我正在創建我的第一個網站，並嘗試儘可能多地玩耍。當jQuery動畫時導航欄向下移動

我爲我的導航欄做了一個動畫。它改變了color和font-size增加了2px。 font-size的增加導致導航欄的其餘部分下降幾個像素。我怎樣才能解決這個問題？

動畫：

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

來源

2013-05-21 dertzi

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

添加行高度的一個標籤。將其設置爲任何最高點。

下面是更新了自己的提琴： http://jsfiddle.net/Lhbys/1/

來源

2013-05-21 02:14:17

謝謝！我覺得一條簡單的線修正了這個問題讓人覺得很蠢。我有很多要學習。 – dertzi

使<li>float，請試試這個： 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; 
}

來源

2013-05-21 03:02:00 Stiger

當jQuery動畫時導航欄向下移動

回答

相關問題