滑動文本並在mouseover事件中向下滑動

滑動功能有一個小問題。我想要做的事情是，當我將鼠標懸停在按鈕上時，較暗的背景將向下滑動，覆蓋整個按鈕（在文本後面），並且文本會向上滑動一點。什麼是迄今爲止我所做的是這樣的：滑動文本並在mouseover事件中向下滑動

<nav> 
    <a href="../webdesign.html"><span>01. <strong>HOME</strong></span><div></div></a> 
    <a href="../webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a> 
    <a href="../webdesign.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a> 
    <a href="../webdesign.html"><span>04. <strong>PORTFOLIO</strong></span><div></div></a> 
    <a href="../webdesign.html"><span>05. <strong>ABOUT US</strong></span><div></div></a> 
    <a href="../webdesign.html"><span>06. <strong>CONTACT US</strong></span><div></div></a> 
</nav>

的jQuery：

$("nav a").mouseenter(function(){ 
     $('div', this).slideDown(200); 
     $("nav a").css('padding-top', '5px'); 
}).mouseleave(function() { 
     $('div', this).slideUp(500); 
     $("nav a").css('padding-top', '25px'); 
});

CSS：

nav{ 
     height:65px; 
     font-family: moderne, Verdana, Geneva, sans-serif; 
     font-size:0.9em; 
     overflow:hidden; 
    } 

    nav a{ 
     background-color:rgba(000,000,000,0.1); 
     border-bottom:1px solid #fff; 
     border-top:1px solid #666; 
     display:block; 
     float:left; 
     padding: 25px 0 0 10px; 
     width: 144px; 
     height:65px; 
     color:#ffd100; 
     font-size: 1em; 
     margin: 0 2px; 
     border-right: solid 1px #fff; 
     border-left: solid 1px #666; 
     -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset; 
     -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset; 
     box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset; 
     position:relative; 
    } 

    nav a strong{ 
     font-weight:normal; 
     color:#333; 
    } 

    nav div{ 
     position:absolute; 
     top:0; 
     left:0; 
     float:left; 
     width:144px; 
     background-color: rgba(0, 0, 0, .5); 
     color:#ddd; 
     padding:5px; 
     margin-top: 0px; 
     border-bottom:1px solid #999; 
     font-size:15px; 
     display:none; 
    }

我知道jQuery是一個有點災難，但我嘗試了很多東西，我我是jQuery初學者。 js這裏：jsFiddle 謝謝你的幫助。

來源

2013-02-15 Piotr Ciszewski

'$（「導航一」）.. CSS（'我得到的感覺，它不查詢時這個災難:) – 2013-02-15 11:09:43

我想過把它放到合適的div中，但我聽說nav是一個常用的標籤，可以替換div。這是我第一次使用導航和其他html5標籤。我試圖用'div'取代它，但沒有給出任何結果，所以我把它保留下來。 – 2013-02-15 11:11:50

@GungFoo感謝您的幫助，感謝您的時間，不幸的是，我只是一個初學者，並沒有給我很多信息。我有一種感覺，我所做的整個jQuery可能無法使用。 – 2013-02-15 11:14:35

看到這個：http://jsfiddle.net/bFFhk/2/

$("nav a").mouseenter(function() { 
    $('div', this).slideDown(200); 
    $(this).css('padding-top', '5px'); 
}).mouseleave(function() { 
    $('div', this).slideUp(500); 
    $(this).css('padding-top', '25px'); 
});

這增加了一個小動畫：http://jsfiddle.net/bFFhk/3/

來源

2013-02-15 11:15:22 Anujith

感謝幾乎那裏，我怎麼能使文本流利地上升，所以使用像滑動功能的東西？而不是跳躍？感謝您的幫助:) – 2013-02-15 11:34:03

@PiotrCiszewski：看到更新的答案... – Anujith 2013-02-15 11:38:53

完美，謝謝:)這完美的工作。 – 2013-02-15 11:39:50

滑動文本並在mouseover事件中向下滑動

回答

相關問題