SlideToggle анимация вниз или вверх

@phpk · Регистрация: 15.05.2013

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

Как сделать анимацию сворачивания slideToggle() не вниз, а вверх?
Имеется две почти идентичные страницы, на которых присутствует кнопка с эффектом slideToggle() и блок, который нужно сворачивать и разворачивать по нажатию этой кнопки. Кнопка находится над блоком с контентом.
Дело в том, что на одной странице по нажатию кнопки контент сворачивается вверх к этой кнопке и разворачивается вниз, а на 2-й странице контент сворачивается вниз, и разворачивается вверх. Как сделать сворачивание не вниз, а вверх?

HTML5

1 2	<p class="butCont"><span></span></p> <div class="content">...</div>

Javascript

1
2
3

$(".butCont").click(function(){
        $(".content").slideToggle(300);
    });

Добавлено через 16 минут
И почему анимация сворачивания у блоков разная?

@nrobert · 23.03.2015, 11:36

Сообщение от phpk

на 2-й странице контент сворачивается вниз, и разворачивается вверх

А что с кнопкой в этом случае?
P.S. Дело, скорее всего, в CSS.

@phpk · 23.03.2015, 11:41 **[ТС]**

Сообщение от nrobert

P.S. Дело, скорее всего, в CSS.

возможно в CSS. На второй странице я просто поменял высоту контента, почему анимация зависит от высоты?
Кнопка на двух страницах прилегает к контенту

@nrobert · 23.03.2015, 11:56

См пример.

Кликните здесь для просмотра всего текста

CSS

.slide{position:relative;height:100px;width:100%}
.slide .inner1{
    position:absolute;
    left:0;
    bottom:0;
    background:red;
    height:50px;
    width:40%;
    display:none;
}
.slide .inner2{
    background:blue;
    height:50px;
    width:40%;
    float:right;
    display:none;
}

HTML5

<div id="outer" class="slide">
  <button id="1">Нажми меня</button>
  <div class="inner1">Раворачиваю вверх</div>
  <button id="2">И меня</button>
  <div class="inner2">Раворачиваю вниз</div>
</div>

Javascript

$(function(){
    $('#outer button').click(function(){
        $(this).next().slideToggle();
    });
});

@phpk · 23.03.2015, 12:31 **[ТС]**

Теперь понятно. Блок контент абсолютно спозиционирован, но на 1-й странице для отступа сверху использовался top, а на второй использовался bottom. Я установил на двух страницах top
nrobert, благодарю, что подсказали!

Новые блоги и статьи
Параллельное программирование: основные технологии и принципы InfoMaster 15.01.2025 Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .	Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .	Как написать микросервис на Go/Golang с Kafka, REST и GitHub CI/CD InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .
Как написать микросервис с нуля на C# с RabbitMQ, CQRS, Swagger и CI/CD InfoMaster 14.01.2025 В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .	Как создать интернет-магазин на PHP и JavaScript InfoMaster 14.01.2025 В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .	Как написать Тетрис на Ассемблере InfoMaster 14.01.2025 Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .	Как создать игру "Танчики" на Unity3d и C# InfoMaster 14.01.2025 Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .	Организую платный онлайн микро-курс по доработке Android-клиента Telegram _Ivana 14.01.2025 Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .	Как создать приложение для фитнеса для iOS/iPhone на Kotlin InfoMaster 14.01.2025 Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .

@nrobert 171 / 153 / 67 Регистрация: 11.02.2015 Сообщений: 450
	23.03.2015, 11:36	2
	Сообщение от phpk на 2-й странице контент сворачивается вниз, и разворачивается вверх А что с кнопкой в этом случае? P.S. Дело, скорее всего, в CSS. 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	23.03.2015, 11:41 [ТС]	3
	Сообщение от nrobert P.S. Дело, скорее всего, в CSS. возможно в CSS. На второй странице я просто поменял высоту контента, почему анимация зависит от высоты? Кнопка на двух страницах прилегает к контенту 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	23.03.2015, 12:31 [ТС]	5
	Теперь понятно. Блок контент абсолютно спозиционирован, но на 1-й странице для отступа сверху использовался top, а на второй использовался bottom. Я установил на двух страницах top nrobert, благодарю, что подсказали! 0