Скрыть частичный div-toggle open on click

Question

Я знаю, как переключить весь div, но я хочу, например, скрыть все, кроме топ-10% или топ-100px. И затем, когда щелкнут div, откроется весь div.

Я думал, что видел это некоторое время назад, но не могу вспомнить, где.

Спасибо.

$(document).ready(function() { 
// hides the slickbox as soon as the DOM is ready 
    $('#slickbox').hide(); 

// toggles the slickbox on clicking the noted link 
    $('#slick-toggle').click(function() { 
$('#slickbox').toggle(400); 
return false; 
    }); 
}); 

Answer 1

Ваш код должен быть что-то в линиях:

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    $('#slickbox').animate({height: '20px'}); 

    // toggles the slickbox on clicking the noted link 
    $('#slick-toggle').click(function() { 
     $('#slickbox').animate({height: '100%'}); 
     return false; 
    }); 
}); 

Answer 2

Посмотрите изображение на моей домашней странице, это то, что вы хотите сделать? http://www.carsonshold.com/

У меня есть реактивный самолет, когда вы наведите указатель мыши на него, но его можно легко изменить до щелчка. Это несколько сложно сделать и до сих пор не совершенен в IE (загрузка страницы и клип не распознаются, пока вы не наведете над ним).

Это может немного отличаться от того, что вы хотите, поскольку я сделал это на изображении, а не на div, поэтому мне нужно было оживить обтравочную маску. Функция I используется следующим образом:

var featureDuration = 300; //time in miliseconds 

    $('#featured-img').hover(function() { 
     $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});    
    }, function() { 
     $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration}); 
    }); 

Если вы хотите, чтобы оживить клип, вам нужно будет вставить этот JS, а потому, что он не ведет себя должным образом иначе. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

Посмотрите на CSS в моем коде, если вы не знаете, как я это сделал, или прокомментируйте здесь, если у вас есть какие-либо вопросы.

Приветствия

Answer 3

ли это довольно быстро, обратите внимание, это будет только скрыть нижнюю часть.

http://jsfiddle.net/loktar/KEjeP/

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