你如何創建這樣的滑動效果？

Question

檢查了這一點 http://heroku.com/

你如何創建這樣的東西？（指了slideDown）你有沒有爲JavaScript鼠標懸停事件，或者是所有的CSS？ Cud有人請給出一個基本的概要？

Answer 1

我使用這個jQuery手風琴小部件。它有一個鼠標懸停效果，就像一個上heroku.com

http://jqueryui.com/demos/accordion/#mouseover

Answer 2

簡單的jQuery。 查看來源，看看如何

Answer 3

試試這個，如果你不需要加載整個jQuery庫。 A simple div slide down JS script

function doSlide(id){ 
    timeToSlide = 50; // in milliseconds 
    obj = document.getElementById(id); 
    if(obj.style.display == "none"){ // if it's allready hidden we slide it down 
     obj.style.visibility = "hidden"; 
     obj.style.display = "block"; 
     height = obj.offsetHeight; 
     obj.style.height="0px"; 
     obj.style.visibility = "visible"; 
     slideDown(obj,0,height,Math.ceil(height/timeToSlide)); 
    } else { 
     slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight); 
    } 
} 

function slideDown(obj,offset,full,px){ 
    if(offset < full){ 
     obj.style.height = offset+"px"; 
     offset=offset+px; 
     setTimeout((function(){slideDown(obj,offset,full,px);}),1); 
    } else { 
     obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead... 
    } 
} 

function slideUp(obj,px,full){ 
    if((obj.offsetHeight-px) > 0){ 
     obj.style.height = obj.offsetHeight-px+"px"; 
     setTimeout((function(){slideUp(obj,px,full);}),1); 
    } else { 
     obj.style.height=full+"px"; // we reset the height if we were to slide it back down 
     obj.style.display = 'none'; 
    } 
}