js Плавная анимация блока

217
19 июля 2018, 17:30

Вообщем есть блок с паралаксом полный код приводить не буду он чутка большой. Высота данного блока статична так же в этом блоке есть кнопка которая разворачивает и сворачивает контент. Нужно чтобы при разворачивании и сворачивании данного блока менялась высота блока с параллаксом, но там стоит jquery 1.12.4 и у меня нифига не работает, вот как у меня это счас код:

$(window).on("load", function() {
    if (document.documentElement.clientWidth > 1900) {
        $(document).ready(function () {
            $(".toggle").click(function(e) {
                e.preventDefault();
                $('.paralax').animate({
                    height: '630px !important',
                }, 550);
                $('.main').animate({
                    height: '675px',
                }, 550);
                $(".slideTogg").slideToggle("slow");
            });
        });
    }
});

Функция имеет такой вид по двум причинам; высота параллакса на каждом экране разная и я хз как определять развернут или свернут блок.

Так работать я её заставил завернув в забавную функцию:

JQuery(function($) {
    // вот сюда запихну весь код что выше
});

Однако блок с параллаксом не увеличивается, хотя должен.

Answer 1

Какие ограничения по поддержке браузерами. Может быть стоило посмотреть в сторону CSS анимации?

Если я всё правильно понял, то нужно что-то похожее на мой пример.

CodePen

const createClickHandler = function(elClass, toggleClass) { 
  let selected = false; 
 
  return function onclick(event) { 
    selected = !selected; 
    console.log(event); 
    if (selected) { 
      document.getElementsByClassName(elClass)[0].classList.add(toggleClass); 
    } else { 
      document.getElementsByClassName(elClass)[0].classList.remove(toggleClass); 
    } 
  }; 
} 
 
document.getElementsByClassName('slider')[0].addEventListener('click', createClickHandler('slider', 'selected'));
body { 
  background-color: #201fa250; 
  box-sizing: border-box; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 95vh; 
  min-width: 95vw; 
} 
 
.container { 
  display: flex; 
} 
 
.center { 
  align-items: center; 
  justify-content: center; 
} 
 
.round-border { 
  border: 10px solid #1e0fa24f; 
  border-radius: 50%; 
} 
 
.slider { 
  display: flex; 
  overflow-y: hidden; 
  min-height: 500px; 
  max-height: 500px; 
  min-width: 500px; 
  max-width: 500px; 
  background-color: #2e0fa2a0; 
  transition-property: all; 
  transition-duration: .5s; 
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
} 
 
.slider.selected { 
  max-height: 450px; 
  min-height: 450px; 
  min-width: 450px; 
  max-width: 450px; 
  /* approximate max height */ 
} 
 
.clickable { 
  color: white; 
  font-size: 28em; 
  margin-top: -0.2em; 
  display: flex; 
} 
 
.clickable::before { 
  content: '֍'; 
}
<div class="container center"> 
  <div class="slider center round-border"> 
    <div class="clickable"></div> 
  </div> 
</div>

READ ALSO
не работает кластеризация google maps
javascript

не работает кластеризация google maps

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

 210
javascript: scrollTo по клику не работает после slideToggle
javascript

javascript: scrollTo по клику не работает после slideToggle

Для второго действия хочу добавить также прокрутку наверх, к элементу id=sometopid, а то после исчезновения hiddencontent оказываемся в случайной точке...

 182
Что означает \ в строке JavaScript?
javascript

Что означает \ в строке JavaScript?

Что означает "\" в строке JavaScript перед символами? И как его правильно использовать?

 174
Скрипт проверки формы , перед отправкой
javascript

Скрипт проверки формы , перед отправкой

скрипт, проверяет инпуты перед отправкой формы, и придает им класс error, подскажите как отредактировать чтобы этот класс добавлялся еще в блокerror-text

 205