2013-06-23 4 views
1

Сначала я создал содержимое вкладки в html с помощью javascript, и теперь я переношу его в раскрывающийся контент. Моя проблема в том, как я могу установить скорость удаления контента. Можете ли вы дать мне образец или идею, как я могу решить эту проблему. Спасибо за ответ.Как установить скорость выпадающего меню?

это мой пример кода:

<html> 
<head> 
<script type="text/javascript"> 
function sample(){ 
if(document.getElementById("cute").style.display=="none"){ 
document.getElementById.("cute").style.display=""; 
document.getElementById.("ugly").style.display="none"; 
    document.getElementById.("good").style.display="none"; 
} 
} 

function samplez(){ 
if(document.getElementById("good").style.display=="none"){ 
document.getElementById.("good").style.display=""; 
document.getElementById.("cute").style.display="none"; 
    document.getElementById.("ugly").style.display="none"; 
} 
} 

function samplex(){ 
if(document.getElementById("ugly").style.display=="none"){ 
document.getElementById.("ugly").style.display=""; 
document.getElementById.("cute").style.display="none"; 
    document.getElementById.("good").style.display="none"; 
} 
} 
</script> 
</head> 

здесь код тела:

<body> 

<ul> 
<li><a href="#" onclick="return false; sample();">Sample</a></li> 
<p id ="cute" style = "display:none;">This is sample 1.</p> 
<li><a href="#" onclick="return false; samplex();">Sample x</a></li> 
<p id ="good" style = "display:none;">This is sample 2.</p> 
<li><a href="#" onclick="return false; samplez();">Sample z</a></li> 
<p id ="ugly" style = "display:none;">This is sample 3.</p> 
</ul> 

</body> 
</html> 

мой вопрос заключается в том, чтобы установить скорость зрения раскрывающимся, если нажать что-нибудь ссылку.

+0

Просто мысль, jQuery имеет множество очень простых в использовании функций анимации, встроенных. Тем не менее, я не очень хорошо разбираюсь в том, насколько сложно (или нет) в чистом JS. – foochow

+1

Как предложил Foo_Chow, jQuery отлично подойдет для этого. Если вы не хотите его использовать, вы всегда можете взглянуть на код и узнать, как они это сделали. – John

ответ

0

html5 анимация может помочь, check more Или, вы можете использовать SetTimeout увеличить значение высоты УСС каждые 1 мс (то, что вы любите), чтобы иметь анимацию.

var dropDown = function() { 
    var ele = document.getElementById("xxx");  
    var h = ele.style.height; 
    ele.style.height = parseInt(h.substring(0, h.length-2)) + 2 + "px"; 
    setTimeout(dropDown, 1); 
}; 
setTimeout(dropDown, 1); 
+0

может кто-нибудь опубликовать здесь, как использовать setTimeout. Благодарю. : p –

+0

проверить код, он показывает использование setTimeout, вам нужно внести в него некоторые изменения. –