Слайд-панель в зависимости от размера содержимого

@TwoFaceMan · Регистрация: 23.04.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, необходимо чтобы слайд-панелька раскрывалась в зависимости от высоты содержимого, сделал с учетом высоты в 100%, но в этом случае не применяется эффект плавного появления.
Если работать с px то все нормально, это можно проследить когда панелька плавно закрывается обратно.
Что необходимо изменить в коде, чтобы эффект применялся при открытии панельки?

Файл index.html

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function(){
$("#show_answer").slideBox({width: "100%", height: "100%", position: "bottom"});
});
</script>
</head>
<body>
<div id="show_answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
</body>
</html>

И собственно скрипт

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
(function($){
    $.fn.slideBox = function(params){
    var content = $(this).html();
        var defaults = {
            width: "100%",
            height: "100%",
            position: "bottom"          // Возможные значения : "top", "bottom"
        }
        
        if(params) $.extend(defaults, params);
        
        var divPanel = $("<div class='slide-panel'>");
        var divContent = $("<div class='content'>");
    
        $(divContent).html(content);
        $(divPanel).addClass(defaults.position);
        $(divPanel).css("width", defaults.width);
 
        // Добавляем кнопку
        $(divPanel).append("<div class='slide-button'><b>Посмотреть решение</b></div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'><b>Спрятать решение</b></div>");
        
        if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
        
        $(this).replaceWith($(divPanel));
        
        //Действие по нажатию кнопки
        $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
                $(divContent).animate({height: "0px"}, 1000);
            else
                $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
        });
    };
})(jQuery);

@Lazy_Den · 23.04.2014, 20:23

TwoFaceMan, решили повелосипедить? Зачем animate(), если для таких целей есть .slideUp() и .slideDown()?

@Faust971 · 23.04.2014, 20:32

А если за место animate применить slideUp и slideDown?

@TwoFaceMan · 23.04.2014, 22:23 **[ТС]**

Тогда эффект к диву не применяется вовсе...

Добавлено через 1 час 24 минуты
Пытаюсь сделать так, но не выходит

Java
1
2
3
4
5
6
7
8
9
//Часть кода из поста выше
//Действие по нажатию кнопки
$(".slide-button").click(function(){
if($(this).attr("id") == "close-button")
    $(divContent).slideDown();
        else
    $(divContent).toggleClass("active");
    $(".slide-button").toggle();
});

@Lazy_Den · 23.04.2014, 22:47

TwoFaceMan, во-первых, на мой личный взгляд, вам рановато еще задумываться об избыточности кода, сокращая его за счет того, что вы не используете фигурные скобки.

JavaScript
1
2
3
4
5
if( ... ) {
 
} else {
 
}

Во-вторых, закиньте пример в песочницу и посмотрим, как его можно вылечить.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	23.04.2014, 20:23
	TwoFaceMan, решили повелосипедить? Зачем animate(), если для таких целей есть .slideUp() и .slideDown()? 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	23.04.2014, 20:32
	А если за место animate применить slideUp и slideDown? 0