Я знаю, как использовать slideDown()
для отображения элемента, который был ранее скрыт.
Но как я могу это сделать для одного элемента? То есть, не переключая скрытый элемент, а вместо этого увеличивая видимое окно элемента высоты жидкости?
Здесь скрипка: http://jsfiddle.net/PzA5D/
Вот некоторая разметка HTML:
<div class="mydiv">
<img src="http://placehold.it/200x400&text=long+img">
</div>
<button class="btn">View More</button>
И CSS:
.mydiv {
height: 100px;
min-height: 100px;
overflow: hidden;
}
И JS:
$('.btn').on('click', function(e){
e.preventDefault();
$('.mydiv').slideDown();
});
Заметьте, я знаю, что мой пример имеет фиксированную высоту, но пусть изображение может быть любой высоты. Но независимо от высоты, только первые 100 пикселей будут отображаться до тех пор, пока не будет нажата кнопка "Просмотреть больше".
ОБНОВИТЬ
Я бы предпочел сохранить анимацию в стиле скольжения, если это вообще возможно.
var mydiv = $('.mydiv');
$('.btn').on('click', function (e) {
e.preventDefault();
mydiv.animate({
height: mydiv.find('img').height()
}, 1000);
});
Если вы хотите, чтобы он скользил вверх и вниз, но не скрывал полностью, вам нужно использовать animate()
$('.btn').on('click', function(e){
e.preventDefault();
if($('.mydiv').height() < "210") {
$('.mydiv').animate({height: $('.mydiv .wrapper').height() + 'px'}, 1000);
} else {
$('.mydiv').animate({height: '205px'}, 1000);
}
});
EDIT: Включен div .wrapper
так что внутри него может быть что-то, а не только изображение, и анимация все равно будет работать.
.outerHeight()
но он просто возвращает начальную минимальную высоту, заданную в CSS, вместо полной высоты, которая частично скрыта.
animate()
завершается ошибкой. Вы должны иметь внутри div обертку, которая имеет полную высоту того, чем является ваше содержимое, которое обрезается overflow: hidden;
.mydiv
. Ответ обновлен. Например, jsfiddle.net/PzA5D/3, если бы это был просто текст, а не изображение.
Пытаться
$('.btn').on('click', function (e) {
e.preventDefault();
var $div = $('.mydiv')
$div.animate({
'height': $div.prop('scrollHeight')
});
});
Демо: скрипка
slidedown()
вопрос, хотя и без хорошей анимации,slidedown()
обеспечиваетslidedown()
. Есть ли способ оживить к этому концу?