Как вы создаете такие эффекты скольжения?

Question

проверить это http://heroku.com/

Как вы создавали такие вещи? Дура, кто-нибудь, пожалуйста, дайте базовую схему?

Answer 1

Я использую этот аккордеонный виджет jQuery. Он имеет эффект наведения мыши, как на heroku.com

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

Answer 2

Попробуйте, если вам не нужно загружать всю библиотеку jQuery. Скрипт простого слайда JS

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';
   }
}

Answer 3

Простой jQuery. Посмотрите источник, чтобы увидеть, как