Уведомление по времени jQuery onclick

Я хочу, чтобы анимация fade произошла. плюс имеет высоту .hideme, которая также растет от 0px to 30px во время ().delay(2000).

Вместо того, чтобы .hideme отображался как display: block; при нажатии, я хочу, чтобы height переходил от 0px to 30px к ().delay(2000), но при этом сохранял анимацию fade.

$(document).ready(function() {
  $("#post-draft1").hide();
  $("#post-button1").click(postNotification);
});

function postNotification() {
  $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}

.hideme {
  background: blue;
  height: 30px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "post-button1">Save Click</button>
<div class = "hideme" id = "post-draft1">This is a test div</div>

javascript jquery

02.05.2018 04:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

147

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Чтобы анимировать высоту, вы можете использовать метод jQuery .animate().

$('.hideme').animate({height:'30px'});

Но сначала вы должны установить меньшее значение высоты:

.hideme {
  background: blue;
  height: 0px;
}

Вместо .delay() вы можете использовать обратный вызов fadeIn для анимации высоты .hideme после завершения fadeIn:

$("#post-draft1").fadeIn("slow", function(){
   $('.hideme').animate({height:'30px'});
});

См .: http://api.jquery.com/animate/

02.05.2018 05:15

Ответ принят как подходящий

$(document).ready(function() {
  $("#post-draft1").hide();
  $("#post-button1").click(postNotification);
});

function postNotification() {
  // $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
  $("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);    

}

.hideme {
   background: blue;
   height: 0px; 
   opacity: 0; 
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "post-button1">Save Click</button>
<div class = "hideme" id = "post-draft1">This is a test div</div>

02.05.2018 05:25

Другие вопросы по теме

Document.getElementByClassName не работает, но document.getElementById работает

Проблема форматирования раскрывающегося списка JQuery Mobile

Произвести случайное изменение цвета границы "DIV" в jquery из цикла PHP while

Как создать форму только со скрытыми входами внутри модальной отправки Bootstrap (4) при входе?

AJAX / JSON с возможным событием JQuery

Как наложить div на 2 других div с помощью JS / JQuery

Uncaught SyntaxError: неожиданный токен: при попытке проанализировать запрос JSON

Получить текущее время видео по щелчку и значение эха в div

CSS проверен + стили меток не работают

Форма повторного частичного просмотра публикации MVC Core 2.0

Уведомление по времени jQuery onclick

Ответы 2

Другие вопросы по теме

Похожие вопросы