Обучение — Не получается работа со slideDown и slideUp


Разворачивание и сворачивание элементов

Материал из JQuery

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

$(«#leftFit»).slideUp() свернет элемент с идентификатором leftFit за 400 мс.
$(«#leftFit»).slideDown() развернет элемент с идентификатором leftFit за 400 мс.
$(«#leftFit»).slideUp(300) в течении 1/3 секунды свернет элемент с идентификатором leftFit.
$(«#leftFit»).slideDown(«slow») в течении 600 мс развернет элемент с идентификатором leftFit.

Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций Show(), Hide().

В действии

При нажатии на текст свернем картинку, а после завершения этой анимации выведем текст:

jQuery sl >
  • Сайтостроение
  • Статьи
  • Веб-программирование
  • Javascript

Библиотека jQuery предоставляет сразу три полезных метода слайдинга: slideUp , jQuery slideDown и slideToggle . Эти методы можно применять для отображения и скрытия элементов HTML DOM с помощью анимации.

jQuery slide

Мы рассмотрим различные методы реализации слайдеров в jQuery с примерами.

  1. jQuery slideDown() : используется, чтобы показать скрытый элемент HTML , развертывая окно с контентом вниз;
  2. jQuery slideUp() : применяется, чтобы скрыть элемент HTML , свертывая окно с контентом вверх;
  3. jQuery slideToggle() : используется, чтобы поочередно сворачивать и разворачивать элемент HTML . Если элемент спрятан, его нужно развернуть методом slideDown() . Для видимых элементов, наоборот, применяется slideUp() .

jQuery slideDown

Метод jQuery slideDown() применяется, чтобы плавно развернуть элементы html . Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться. Параметры метода slideDown() определяют то, как будет выполняться развертывание.

Варианты синтаксиса метода slideDown() :

  1. slideDown ( duration );
  2. slideDown ( duration, callBackfunction );
  3. slideDown ( speed, easing, callBackfunction );
  4. slideDown ( options ).

duration : продолжительность ( duration ) задается в миллисекундах. Также можно задать строковые значения, такие как « slow » ( медленно ) и « fast » ( быстро ). По умолчанию длительность составляет 400 миллисекунд.

Функция callBackfunction : эта функция активизируется после завершения эффекта.

easing : данный параметр определяет, какая функция будет использована для анимации: « swing » или « linear ». Значением по умолчанию является « swing ».

options : duration , callBackfunction , easing , special easing и т. д.

Пример jQuery slideDown

В этом примере jQuery slideDown() реализации метод принимает два параметра: продолжительность ( duration ) со значением « slow » и функция обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

Вот как эффект развертывания выполняется в jQuery . Параметры этого метода похожи на jQuery hide() и show() . Ниже показан результат применения программы.

jQuery slideUp

Методы jQuery slideUp и slideDown() применяются, чтобы плавно свернуть элементы html . Атрибут height выбранного элемента анимирован, поэтому он будет сворачиваться плавно, поднимая нижнюю часть.

Варианты синтаксиса метода slideUp():

  1. slideUp ( duration );
  2. slideUp ( duration,callBackfunction );
  3. slideUp ( speed,easing,callbackMethod );
  4. slideUp ( options ).

duration : продолжительность ( duration ) задается в миллисекундах. Также можно задать строковые значения, такие как « slow » ( медленно ) и « fast » ( быстро ). По умолчанию длительность составляет 400 миллисекунд.

Функция callBackfunction : эта функция активизируется после завершения слайдинга.

easing : определяет, какая функция плавности будет использована для анимации: « swing » или « linear ». Значением по умолчанию — « swing ».

options : duration , callBackfunction , easing , special easing и т. д.

Пример jQuery slideUp

В этом примере ( без jQuery slideDown ) метод slideUp() принимает два параметра: продолжительность ( duration ) со значением « slow » и функцию обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

Вот как эффект jQuery slideUp slideDown() выполняется.

jQuery slideToggle

Методы jQuery Toggle и slideDown используются, чтобы показать или скрыть элементы html . Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться или сворачиваться. Метод slideToggle() сначала проверяет видимость выбранного элемента. Если элемент раскрыт, то будет применен метод slideUp() , если нет — slideDown() .


Варианты синтаксиса метода slideToggle() :

  1. slideToggle ( duration );
  2. slideToggle ( duration,callBackfunction );
  3. slideToggle ( speed,easing,callbackMethod );
  4. slideToggle ( options ).

Пример jQuery slideToggle

В данном примере slideToggle() принимает два параметра: продолжительность ( duration ) со значением « slow » и функцию обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

Так можно переключаться между методами jQuery slideUp slideDown , чтобы скрыть или показать элементы html .

Данная публикация представляет собой перевод статьи « jQuery slideUp, slideDown, slideToggle » , подготовленной дружной командой проекта Интернет-технологии.ру

slideup

Я пытаюсь отображать изображения со скользящими эффектами (сверху вниз страницы) один за другим в загрузке страницы. После прохождения стольких сайтов…

Все другие браузеры (включая IE8+), похоже, обрабатывают этот код без проблем; просто IE7 терпит неудачу. Он ничего не делает при…

Я хочу изменить следующий сценарий с начального действия slidedown на начальное действие slide * up*. Я не могу использовать Jquery,…

Я бился головой об это в течение полутора дней, прежде чем это, наконец, все сошлось, отчасти потому, что я фундаментально…

Я пытаюсь заставить это работать с vBulletin: http://jsfiddle.net/amosrivera/AYWku/ Он работает только для первого плаката нити и всех остальных, кто отвечает…

Недавно я получил этот замечательный код от «deifwud» : $(document).ready(function()

Таким образом, мой сценарий работает, но проблема, которую я испытываю, заключается в том, что когда я использую функцию close-but, она…

Хорошо так вот моя проблема: Мне нужно, чтобы верхний div только скользил вверх / вниз, когда mediaPlayerWrapper есть, а не…

Я знаю, что обычно есть простое решение этого, которое является ссылкой на dll в add references. Но я добавил ссылку…

Мне помогли с кодом, чтобы навести на изображение и для другого изображения, чтобы появиться над оригиналом. $(‘.hoverpic’).hover(function () < $(this).attr(‘src’,$(this).attr(‘src’).replace(‘.jpg’,’_hover.jpg’));…

Я думаю, что это не так сложно для кого-то опытного в jquery, но, к сожалению, я не. Я искал вокруг,…

Im ищет конкретные инструкции для создания слайд вверх поле в нижнем правом углу веб-страницы. Например. Olark, qualroo Результаты поиска были…

Кто-нибудь знает, как решить эту проблему? Я пытаюсь скользить вверх по моим ссылкам (меню навигации), расположенным в липком футере, нажав…

Похожая ссылка на вопрос здесь, так как никто не anwsered его и из-за его сложности, я делаю новый и более…

Я пытаюсь создать кнопку «вверх», которая приведет пользователя к самой верхней части целевой страницы. jsFiddle Я хотел бы, чтобы эта…

У меня есть приложение, которое выглядит как рабочий стол Windows. Есть значки, которые открывают перетаскиваемые окна (дивы), которые отображают содержимое….

Класс (heady) должен скользить, когда высота документа ниже 25%, а затем, если прокрутить его, появится с задержкой 1400 МС. Проблема…

в последние дни я переключил свое меню на мобильную дружественную версию. До сих пор почти сделано, остается только одна проблема:…

Я хочу открыть слайдер на следующей странице при нажатии кнопки, но есть несколько кнопок. Далее, когда я нажимаю одну из…

Цукерберг рекомендует:  Обучение - Salesforse est kto rabotal s etim zverem

Все работает на этой контактной форме, за исключением последнего бита с помощью функции slide up, чтобы заменить контактную форму с…

Нужна помощь с чем-то, почему не работает… У меня есть кнопка внутри каждой строки страницы, эта кнопка перенаправляет на другую…

Я использую функцию jQuery slideDown для анимации скрытого меню на мобильных устройствах, и у меня есть интересная проблема. Когда меню…

Недавно я реализовал фиксированную позицию navbar на моем сайте, доступ к которому осуществляется нажатием кнопки меню в левом верхнем углу…

Вот чего я пытаюсь достичь: При нажатии кнопки slideUp div, после того, как это вверх — очистить содержимое, создавать строки…

Используя jQuery, когда пользователь нажимает на знак «плюс», я перемещаю содержимое вниз и заменяю знак» плюс «знаком» минус » и…

Я создал меню, которое использует jQuery slideDown/slideUp для отображения / скрытия пунктов меню. Код Jquery выглядит так $(«.menu-reveal a»).click(function() <…

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

Я хотел создать скользящую панель, как простая боковая панель, но она должна скользить снизу вверх и должна быть регулируемой до…

Я пытаюсь использовать эффект скольжения вверх и вниз для перехода между разделами той же веб-страницы. В основном, я настроил Мой…

Я хотел бы сделать мой сайт, чтобы сделать некоторые переходы страницы, но у меня есть некоторые проблемы (возможно, это не…

Я опубликовал свое резюме на своем веб-сайте, и у меня есть различные разделы, скрытые при загрузке страницы. Я использовал slideToggle,…

I must slideup modalbox-dialog and also fadout modalbox-overlay and that must happen on the same time so its not possible…

У меня проблемы с аккордеоном. У меня есть, где пользователь может клик на нем (в нижней части моей страницы), и…


Текущий вопрос Является расширением $(«.someclass»).is («: hover») хорошо работает только для одного экземпляра» someclass» ниже jQuery фрагмент работает allready хорошо…

мне нужно руководство. Мне нужно сделать пользовательский вид, который коснулся и перетащить экран слайды из экрана. Я пробовал эту классную…

Я не могу понять, как скользить информацию в отчете SSRS, если данные возвращаются как NULL. Поэтому, если у меня есть…

Я хотел бы, чтобы мой navbar имел эффект slideDown вместо fideIn. Это возможно? Это код с .fideIn: $(document).ready(function () <…

у меня есть JS script для кнопки, когда я нажимаю на нее показать социальный значок, и когда я нажимаю назад…

У меня следующий вопрос: в данный момент я разрабатываю веб-приложение и настраиваю формы своей страницы. Тем не менее, они действительно…

У меня есть этот jQuery: $(document).ready(function ()

https://jsfiddle.net/ydbx2a9c/5/ Выпуск около 2 дивов, расположенных в верхней и нижней части страницы (Абсолют). На mouseover эти 2 должны slideDown и…

на моем сайте я использую несколько divs под названием «ligne». внутри этих дивов, у меня есть 5 дивов, и один…

Я хочу закрыть предыдущий слайд, когда слайд вниз (активен). Как я могу это сделать? Спасибо, что помог. //PARAMS var codeicons…

Я пытаюсь оживить высоту div, чтобы скрыть или показать содержимое внутри него. Использование animate () является наиболее удобным способом получить…

Я пытаюсь использовать функцию slideUp()JQuery на куче элементов без изображений. Код, который я написал, прекрасно работает в JSFiddle, но на…

Я разрабатываю этот сайт http://www.dailydeliver.com/index.php Здесь-вы увидите телегу. При добавлении товара-он отправляется в корзину. Однако тележка остается открытой. Тележка закрывается…

Таким образом, я использую библиотеку скользящей панели в своем приложении, и я пытаюсь реализовать ScrollViewвнутри скользящей панели. Поскольку и скользящая…

как я могу отобразить макет в центре с помощью slideUp, когда я нажимаю кнопку и снова нажимаю, чтобы скрыть ……

У меня есть вкладки пользовательского интерфейса jquery, но я хочу добавить слайд вверх и слайд вниз анимацию. В настоящее время…

Проблема с sl >

У меня есть проблема с эффектом аккордеона, который я хочу сделать.

Я хотел бы иметь следующую функциональность. Если вы нажмете в любом месте «div.post» текст, окруженный «p.read-more», который скрыт от начала, скользит вниз и раскрывается. Затем, чтобы закрыть его, вам нужно нажать «div.close».

Я пробовал что-то подобное, но, честно говоря, как вы, наверное, видите, я потерял ��

Я пробовал что-то вроде этого

Спасибо за любую помощь.

РЕДАКТИРОВАТЬ

Извините, я неправильно понял, что вы хотели:

Я хотел бы иметь следующую функциональность. Если вы нажмете в любом месте «div.post» текст, окруженный «p.read-more», который скрыт от начала, скользит вниз и раскрывается. Затем, чтобы закрыть его, вам нужно нажать «div.close».

Это событие click в основном говорит: «Если div.post НЕ имеет активного класса, тогда спуститесь вниз.read-more и добавьте активный класс в div.post».

Событие div.close прост — нет условия, как если бы вы запускали событие, когда.read-more уже скрыто, ничего не произойдет!

ОБНОВИТЬ

Это должно быть все, что вам нужно для достижения того, что вы ищете. И как еще одна мысль, которую я бы сказал, не скрывайте.read-more используя jQuery, просто делайте это с помощью CSS — таким образом вы не получите мерцание при загрузке страницы.

Похоже, вам не хватает закрывающего div на 4-й строке.

Более простая версия jquery, которую вы можете использовать, — это

Вы близки. То, что вас трогает, — это последовательность операций. Оператор if выполняется один раз, когда скрипт анализируется. Вы хотите, чтобы ваши анимации слайдов запускались после события клика, поэтому их нужно перенести в обработчик кликов.

А затем измените close обработчик щелчка, чтобы искать его для read-more для переключения

Кроме того, в вашем html есть синтаксическая ошибка. Не уверен, что это опечатка или нет. Ваш close конец DIV тег отсутствует.

Обучение — Не получается работа со slideDown и slideUp

Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Добро пожаловать на сайт поддержки XOOPS.


Приднестровская поддержка XOOPS

Метод .slideUp() позволяет плавно уменьшить высоту элемента до 0. Как только высота элемента достигает нулевого значения, ему присваивается свойство display:none, исключающее влияние элемента на компоновку страницы. Метод .slideDown() выполняет обратное действие: он удаляет свойство display:none и плавно увеличивает высоту элемента от 0 до ее исходного значения.

Аналогично методам .fadeln() и .fadeOut() , данные методы принимают два необязательных параметра: длительность анимации и функцию обратного вызова. В качестве демонстрационного примера сверните абзац с классом foo по высоте, выведите сообщение в окне консоли, а затем разверните абзац до его первоначального размера и вновь выведите соответствующее сообщение.

$(«p.foo»)
.slideUp(1000, function() <
console.log(«Скрыт!»);
>)
.slideDown(1000, function() <
console.log(«Отображен!»);
>);

Метод . slideToggle() делает то же самое, что и методы .slideUp() и .slideDown() , достаточно «интеллектуален» и способен самостоятельно определить, какое действие необходимо выполнить, в зависимости от того, скрыт элемент или отображен.

Для проверки того, как работает этот метод, примените его к абзацу с классом foo.

$(«p.foo»)
.slideToggle(«slow», function() <
console.log(«Переключается!»);
>);

Выполнив этот код последовательно несколько раз, вы увидите, как абзац попеременно то свертывается по высоте, то развертывается.

Ошибки slideDown и slideUp

Я новичок в jQuery, и уже вижу проблемы со встроенным анимация slideDown()/slideUp(). Я использую гибкую ширину элемент, и когда я использую функцию, элемент не возвращается к это полная ширина. Я думаю, что это имеет какое-то отношение к пути jQuery находит ширину элемента. Я испытываю ошибку в Safari 3 и Firefox 3.1 для OS X. Ниже приведен html для страницы:

Проблема может быть решена путем обертывания in, но затем появляется новая ошибка в Firefox, где анимация slideDown приближается к концу.

Цукерберг рекомендует:  Как легко начать писать на PowerShell или простая автоматизация Active Directory

Любая помощь будет оценена.

javascript jquery css

2 ответа

2 Решение bloudermilk [2009-06-04 00:07:00]

Итак, оказывается, что исправление заключалось в том, чтобы вложить каждую таблицу в div, а затем установить ширину таблицы в статическую ширину. В моем случае «600 пикселей». Я экспериментировал и, как я помню, когда jQuery находит высоту элемента, он устанавливает его в положение: abolsute; видимость: none;, которая в моем случае оставила 100% ширину, с которой ничего не сравнилось, рендеринга как нечто вроде 100px в ширину и выше, чем должно было быть. Таким образом, jQuery анимируется на эту высоту, а затем все возвращается в нормальное состояние, заставляя браузер привязываться к реальной высоте.

«Переход» происходит из-за того, что элементы H2 имеют поля и в соответствии с правилами вертикальных полей CSS будет collapse.

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

Затем таблица плавно анимируется, оставляя вас всего двумя заголовками:

И вдруг неожиданно нет таблицы между этими заголовками и полями, и вы получите что-то вроде этого:

И этот коллапс вызывает «прыжок».

Одно из возможных решений заключается в замене полей H2 на paddings:

Что может быть причиной того, что .sl >

Фон:

Я столкнулся с проблемой, которая показалась мне неожиданной. У меня есть небольшой модуль jQuery, где я использовал .slideToggle() , чтобы показать /скрыть элемент, и он работал нормально. Сегодня я реализую два открытых метода для своего плагина, чтобы показать или скрыть элемент со скользящим эффектом.

Как бы просто это не звучало, я решил использовать .slideUp() и slideDown() , чтобы выполнить то же самое. Я был очень удивлен, когда понял, что ничего не происходит при вызове этих методов для элемента.

В качестве дополнительной заметки, вызывая .show() и .hide() также работает нормально, но без нужной анимации.

Я всегда думал, что .slideToggle() реализовал ту же функциональность, что и .slideUp() и .slideDown() «под капотом», но, очевидно, это не так.

Мой вопрос:

Чем .slideToggle() отличается от .slideUp() и .slideDown() и что я должен учитывать при использовании одного из них по сравнению с другими?

Обновление, пример:

Мне удалось разбить его на наиболее важные компоненты, необходимые для воспроизведения этой ошибки в этой скрипке . Вы можете закомментировать .slideToggle(«slow») и .slideUp(«slow») соответственно чтобы проверить это. С slideToggle это работает, с slideUp это не так.

jQuery метод .sl >jQuery эффекты

Определение и применение

jQuery метод .slideDown() плавно отображает выбранные элементы скользящим движением (постепенно увеличивая их высоту). Для того, чтобы плавно скрыть выбранные элементы скользящим движением вы можете воспользоваться методом .slideUp(), или методом .slideToggle(), который отображает, или скрывает выбранные элементы скользящим движением.

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Параметр Описание
duration Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
complete Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400).
    Тип: Number , или String .
    Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing).
    Тип: String .
    Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true).
    Тип: Boolean , или String .
    Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false , то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( » имя очереди » ), чтобы запустить её.
  • specialEasing.
    Тип: PlainObject .
    Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step.
    Тип: Function ( Number now, Tween tween ).
    Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress.
    Тип: Function .
    Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete.
    Тип: Function .
    Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start.
    Тип: Function ( Promise Object animation).
    Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done.
    Тип: Function ( Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail.
    Тип: Function ( Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always.
    Тип: Function ( Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Пример использования


В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно отображаем, или скрываем скользящим движением выбранные элементы

Результат нашего примера:

Пример использования jQuery методов .slideDown() и .slideUp() (без параметров).

Рассмотрим следующий пример в котором зададим методам .slideUp() и .slideDown() различные значения продолжительности анимации:

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно скрываем, либо отображаем все элементы

Результат нашего примера:

Пример использования jQuery методов .slideDown() и .slideUp() (различная скорость анимации).

Рассмотрим следующий пример в котором зададим методам .slideUp() и .slideDown() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы

Результат нашего примера:

Пример использования jQuery методов .slideDown() и .slideUp() (с callback функцией).

Рассмотрим следующий пример в котором передадим в качестве параметра методов .slideUp() и .slideDown() объект, содержащий различные опции, которые будут контролировать анимацию:

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно скрываем, либо отображаем все элементы

  • продолжительность анимации равную 800 миллисекунд (duration: 800)
  • эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
  • функция, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (complete: function).
  • анимация не размещается в очереди эффектов (queue: false).

Результат нашего примера:

Пример использования jQuery методов .slideDown() и .slideUp() (объект с опциями в качестве параметра). jQuery эффекты

slideup

Я пытаюсь отображать изображения со скользящими эффектами (сверху вниз страницы) один за другим в загрузке страницы. После прохождения стольких сайтов…

Все другие браузеры (включая IE8+), похоже, обрабатывают этот код без проблем; просто IE7 терпит неудачу. Он ничего не делает при…

Я хочу изменить следующий сценарий с начального действия slidedown на начальное действие slide * up*. Я не могу использовать Jquery,…

Цукерберг рекомендует:  #неудобноработатьсапп - неудобно работать с приложением

Я бился головой об это в течение полутора дней, прежде чем это, наконец, все сошлось, отчасти потому, что я фундаментально…

Я пытаюсь заставить это работать с vBulletin: http://jsfiddle.net/amosrivera/AYWku/ Он работает только для первого плаката нити и всех остальных, кто отвечает…

Недавно я получил этот замечательный код от «deifwud» : $(document).ready(function()

Таким образом, мой сценарий работает, но проблема, которую я испытываю, заключается в том, что когда я использую функцию close-but, она…

Хорошо так вот моя проблема: Мне нужно, чтобы верхний div только скользил вверх / вниз, когда mediaPlayerWrapper есть, а не…

Я знаю, что обычно есть простое решение этого, которое является ссылкой на dll в add references. Но я добавил ссылку…

Мне помогли с кодом, чтобы навести на изображение и для другого изображения, чтобы появиться над оригиналом. $(‘.hoverpic’).hover(function () < $(this).attr(‘src’,$(this).attr(‘src’).replace(‘.jpg’,’_hover.jpg’));…

Я думаю, что это не так сложно для кого-то опытного в jquery, но, к сожалению, я не. Я искал вокруг,…

Im ищет конкретные инструкции для создания слайд вверх поле в нижнем правом углу веб-страницы. Например. Olark, qualroo Результаты поиска были…

Кто-нибудь знает, как решить эту проблему? Я пытаюсь скользить вверх по моим ссылкам (меню навигации), расположенным в липком футере, нажав…

Похожая ссылка на вопрос здесь, так как никто не anwsered его и из-за его сложности, я делаю новый и более…

Я пытаюсь создать кнопку «вверх», которая приведет пользователя к самой верхней части целевой страницы. jsFiddle Я хотел бы, чтобы эта…

У меня есть приложение, которое выглядит как рабочий стол Windows. Есть значки, которые открывают перетаскиваемые окна (дивы), которые отображают содержимое….

Класс (heady) должен скользить, когда высота документа ниже 25%, а затем, если прокрутить его, появится с задержкой 1400 МС. Проблема…

в последние дни я переключил свое меню на мобильную дружественную версию. До сих пор почти сделано, остается только одна проблема:…

Я хочу открыть слайдер на следующей странице при нажатии кнопки, но есть несколько кнопок. Далее, когда я нажимаю одну из…

Все работает на этой контактной форме, за исключением последнего бита с помощью функции slide up, чтобы заменить контактную форму с…

Нужна помощь с чем-то, почему не работает… У меня есть кнопка внутри каждой строки страницы, эта кнопка перенаправляет на другую…

Я использую функцию jQuery slideDown для анимации скрытого меню на мобильных устройствах, и у меня есть интересная проблема. Когда меню…


Недавно я реализовал фиксированную позицию navbar на моем сайте, доступ к которому осуществляется нажатием кнопки меню в левом верхнем углу…

Вот чего я пытаюсь достичь: При нажатии кнопки slideUp div, после того, как это вверх — очистить содержимое, создавать строки…

Используя jQuery, когда пользователь нажимает на знак «плюс», я перемещаю содержимое вниз и заменяю знак» плюс «знаком» минус » и…

Я создал меню, которое использует jQuery slideDown/slideUp для отображения / скрытия пунктов меню. Код Jquery выглядит так $(«.menu-reveal a»).click(function() <…

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

Я хотел создать скользящую панель, как простая боковая панель, но она должна скользить снизу вверх и должна быть регулируемой до…

Я пытаюсь использовать эффект скольжения вверх и вниз для перехода между разделами той же веб-страницы. В основном, я настроил Мой…

Я хотел бы сделать мой сайт, чтобы сделать некоторые переходы страницы, но у меня есть некоторые проблемы (возможно, это не…

Я опубликовал свое резюме на своем веб-сайте, и у меня есть различные разделы, скрытые при загрузке страницы. Я использовал slideToggle,…

I must slideup modalbox-dialog and also fadout modalbox-overlay and that must happen on the same time so its not possible…

У меня проблемы с аккордеоном. У меня есть, где пользователь может клик на нем (в нижней части моей страницы), и…

Текущий вопрос Является расширением $(«.someclass»).is («: hover») хорошо работает только для одного экземпляра» someclass» ниже jQuery фрагмент работает allready хорошо…

мне нужно руководство. Мне нужно сделать пользовательский вид, который коснулся и перетащить экран слайды из экрана. Я пробовал эту классную…

Я не могу понять, как скользить информацию в отчете SSRS, если данные возвращаются как NULL. Поэтому, если у меня есть…

Я хотел бы, чтобы мой navbar имел эффект slideDown вместо fideIn. Это возможно? Это код с .fideIn: $(document).ready(function () <…

у меня есть JS script для кнопки, когда я нажимаю на нее показать социальный значок, и когда я нажимаю назад…

У меня следующий вопрос: в данный момент я разрабатываю веб-приложение и настраиваю формы своей страницы. Тем не менее, они действительно…

У меня есть этот jQuery: $(document).ready(function ()

https://jsfiddle.net/ydbx2a9c/5/ Выпуск около 2 дивов, расположенных в верхней и нижней части страницы (Абсолют). На mouseover эти 2 должны slideDown и…

на моем сайте я использую несколько divs под названием «ligne». внутри этих дивов, у меня есть 5 дивов, и один…

Я хочу закрыть предыдущий слайд, когда слайд вниз (активен). Как я могу это сделать? Спасибо, что помог. //PARAMS var codeicons…

Я пытаюсь оживить высоту div, чтобы скрыть или показать содержимое внутри него. Использование animate () является наиболее удобным способом получить…

Я пытаюсь использовать функцию slideUp()JQuery на куче элементов без изображений. Код, который я написал, прекрасно работает в JSFiddle, но на…

Я разрабатываю этот сайт http://www.dailydeliver.com/index.php Здесь-вы увидите телегу. При добавлении товара-он отправляется в корзину. Однако тележка остается открытой. Тележка закрывается…

Таким образом, я использую библиотеку скользящей панели в своем приложении, и я пытаюсь реализовать ScrollViewвнутри скользящей панели. Поскольку и скользящая…

как я могу отобразить макет в центре с помощью slideUp, когда я нажимаю кнопку и снова нажимаю, чтобы скрыть ……

У меня есть вкладки пользовательского интерфейса jquery, но я хочу добавить слайд вверх и слайд вниз анимацию. В настоящее время…

Ошибки slideDown и slideUp

Я новичок в jQuery, и уже вижу проблемы со встроенным анимация slideDown()/slideUp(). Я использую гибкую ширину элемент, и когда я использую функцию, элемент не возвращается к это полная ширина. Я думаю, что это имеет какое-то отношение к пути jQuery находит ширину элемента. Я испытываю ошибку в Safari 3 и Firefox 3.1 для OS X. Ниже приведен html для страницы:

Проблема может быть решена путем обертывания in, но затем появляется новая ошибка в Firefox, где анимация slideDown приближается к концу.

Любая помощь будет оценена.

javascript jquery css

2 ответа

2 Решение bloudermilk [2009-06-04 00:07:00]

Итак, оказывается, что исправление заключалось в том, чтобы вложить каждую таблицу в div, а затем установить ширину таблицы в статическую ширину. В моем случае «600 пикселей». Я экспериментировал и, как я помню, когда jQuery находит высоту элемента, он устанавливает его в положение: abolsute; видимость: none;, которая в моем случае оставила 100% ширину, с которой ничего не сравнилось, рендеринга как нечто вроде 100px в ширину и выше, чем должно было быть. Таким образом, jQuery анимируется на эту высоту, а затем все возвращается в нормальное состояние, заставляя браузер привязываться к реальной высоте.

«Переход» происходит из-за того, что элементы H2 имеют поля и в соответствии с правилами вертикальных полей CSS будет collapse.

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

Затем таблица плавно анимируется, оставляя вас всего двумя заголовками:

И вдруг неожиданно нет таблицы между этими заголовками и полями, и вы получите что-то вроде этого:

И этот коллапс вызывает «прыжок».

Одно из возможных решений заключается в замене полей H2 на paddings:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих