Как я могу показать часть элемента и переключаться на все элементы при нажатии?

0

Я знаю, как использовать 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 пикселей будут отображаться до тех пор, пока не будет нажата кнопка "Просмотреть больше".

ОБНОВИТЬ

Я бы предпочел сохранить анимацию в стиле скольжения, если это вообще возможно.

Теги:

3 ответа

1
Лучший ответ

fiddle Demo

var mydiv = $('.mydiv');
$('.btn').on('click', function (e) {
    e.preventDefault();
    mydiv.animate({
        height: mydiv.find('img').height()
    }, 1000);
});
Поделиться
  • 0
    Благодарю. Это slidedown() вопрос, хотя и без хорошей анимации, slidedown() обеспечивает slidedown() . Есть ли способ оживить к этому концу?
  • 0
    @ Райан проверить обновленную демо.
Показать ещё 2 комментария
1

Если вы хотите, чтобы он скользил вверх и вниз, но не скрывал полностью, вам нужно использовать animate()

http://jsfiddle.net/PzA5D/2/

$('.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 так что внутри него может быть что-то, а не только изображение, и анимация все равно будет работать.

Поделиться
  • 0
    Кажется, что это могло бы сработать. Но если мой контент - это не изображение, а текст с изменчивой длиной или набор других элементов div, то как я могу получить соответствующую высоту для анимации? Я пробовал .outerHeight() но он просто возвращает начальную минимальную высоту, заданную в CSS, вместо полной высоты, которая частично скрыта.
  • 0
    Было бы хорошо, если бы вы могли просто использовать 100%, но, к сожалению, вы не можете, animate() завершается ошибкой. Вы должны иметь внутри div обертку, которая имеет полную высоту того, чем является ваше содержимое, которое обрезается overflow: hidden; .mydiv . Ответ обновлен. Например, jsfiddle.net/PzA5D/3, если бы это был просто текст, а не изображение.
1

Пытаться

$('.btn').on('click', function (e) {
    e.preventDefault();
    var $div = $('.mydiv')
    $div.animate({
        'height': $div.prop('scrollHeight')
    });
});

Демо: скрипка

Поделиться
  • 0
    Да. Но есть ли способ оживить к этому концу?
  • 0
    @ Райан посмотреть обновление
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню