• 0
XopicT

Почему боковое меню не заезжает обратно?

Вопрос

Здравствуйте. Вот такая проблема. Слайдер красиво выезжает, а при повторном клике просто пропадает. Как сделать так что бы он красиво выезжал и так же красиво заезжал?)
https://jsbin.com/yuyawic/1/edit?html,css,js,output

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

У вас задано `transition: left 0.3s;`, плавное изменение будет только у свойства left, а про прозрачность ничего не сказано, следовательно, слайдер будет моментально исчезать, когда opacity возвращается в ноль.

Может сделать так `transition: 0.3s;` — будут плавно меняться все свойства (все допустимые свойства). Или точечно — `transition: left 0.3s, opacity 0.3s;`

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
37 минут назад, mrnobody сказал:

У вас задано `transition: left 0.3s;`, плавное изменение будет только у свойства left, а про прозрачность ничего не сказано, следовательно, слайдер будет моментально исчезать, когда opacity возвращается в ноль.

Может сделать так `transition: 0.3s;` — будут плавно меняться все свойства (все допустимые свойства). Или точечно — `transition: left 0.3s, opacity 0.3s;`

Спасибо Большое!)помогло)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: pug1n
      Здравствуйте, помогите мне со вставкой переменной в herf. Вставляю ссылку на страницу пишет:
      Файл не найден
      Возможно, он был перемещён или удалён.
      В интернете очень мало информации по этому вопросу.
      Заранее спасибо!
      index7.html


    • Автор: celiFox
      Доброго времени суток,
      столкнулся с проблемой, скрипт не работает в Firefox но прекрасно работает в Chrome.
      Суть скрипта, каждые 10 секунд "переключать" рандомную фотку
      вот скрипт:
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>         <script> $(document).ready(function() { $('#slider4').children('div').each(function(n_div,div) { $(div).children('img').each(function(n_img,img) { if(n_img) $(img).css({'opacity':'0.0'}); else { $(div).attr({'value':(n_img+1)}); $(img).css({'opacity':'1.0'}); } }); }); window.setInterval(function() { $('#slider4').children('div').each(function(n,element) { var img = $(element).attr('value');; var rnd = Math.floor(Math.random()*(5-1+1))+1; if(img != rnd) { $(element).attr({'value':rnd}); $(element).children('#img' + (n + 1) + img).animate( {'opacity':'0.0'}); $(element).children('#img' + (n + 1) + rnd).animate( {'opacity':'1.0'}); } }); },10000); }); </script>  
      P.S Скрипт не мой, взял с этого форума, вырезал лишнее. Не кидайтесь сильно камнями) 
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)