2010-03-19 3 views
0

У меня есть ссылка, которая когда-то висела над коробкой ниже слайдов вниз, как только наведите указатель мыши, она вернется назад. Я работаю почти так, как хочу, хотя в IE8 (еще не проверен Havent в другом IE) текст в поле, которое скользит вниз, не является центральным. В firefox, когда он скользит вниз, углы не являются гладкими, но они находятся в IE.jQuery slideDown menu

Код:

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    $('#nav_top').corners('5px'); 
     $('#nav_bottom').hide(); 
     $('#nav_bottom').corners(); 

    $('#link').hover(function() 
     { 
      $('#nav_top').corners('10px top'); 
      $('#nav_bottom').stop(true, true).slideDown();     
      $('#nav_bottom').slideDown("slow"); 



     }, 

     function() 
     { 
     $('#nav_bottom').slideUp("fast"); 

    } 

     );   


}); 

</script> 


<div id="nav_top"> 

<a href="javascript:void(0);" id="link">Hover</a> 

<div id="nav_bottom"> 

<br />Stuff 

</div> 

</div> 

</div> 

Любой совет, также лучше использовать .hover или .mouseEnter/MouseLeave?

Благодаря

Css:

nav_top 
{ 
background-color: #084B8A; 
text-align: center; 
margin-left: 150px; 
margin-top: 15px; 
width: 100px; 
padding: 20px; 
font-size: 20px; 
} 

#nav_top a 
{ 
text-decoration: none; 
color: #ffffff; 
} 


#nav_bottom 
{ 
text-align: center; 
background-color: #084B8A; 
z-index: 1; 
padding: 30px; 

} 

ответ

0

попробуйте это!

$("#link").hover(
    function() { 
    $('#nav_top').corners('10px top'); 
    $(this).next().slideDown("slow"); 
    }, 
    function() { 
    $(this).next().slideUp("fast"); 
    } 
); 

CSS

in anycase you need to set the position: 
//container 
#nav_top { 
  position: relative; 
} 
//the inner element 
#nav_bottom { 
  position: absolute; 
  
} 
+0

Am не объявляя его в два раза? Я очищал очередь любых слайдов, поэтому он не испортится, когда вы наводите на него 100 секунд. – Elliott

+0

вы можете попробовать использовать $ (this) .next(). SlideDown (1000); вместо быстрых или медленных! в любом случае я думаю, что лучше использовать animate() Дайте мне знать –

+0

Я пробовал ваш код, и это не имело никакого значения, я знаю, используя номера, которые я просто предпочитаю использовать быстро/медленно :). Спасибо – Elliott

0

Я бы поставил центрированный текст вопрос не является проблемой JQuery, а скорее вопрос CSS. Вы пробовали использовать стиль = "text-align: center;" подобный

+0

Yeh я, что в моем CSS - Добавлен код CSS выше приветствий – Elliott