1

<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <style>
        #pic {
            position:relative;
            background: url(pic.jpg);
            margin: auto;
            width: 500px;
            height: 500px;
            top: 100px;

        }
    </style>
</head>
<body>
    <div id="pic"></div>
</body>
</html>

Как сделать, чтобы картинка плавно открывалась снизу вверх (как сделать, чтобы она открывалась сверху вниз я знаю). Если по кадрам, то это должно выглядеть примерно так: введите сюда описание изображения Ну и все время раскрытия изображения - 1 секунда.

Картинка при этом должна оставаться статичной, посередине, не двигаться относительно других блоков. Как это реализовать на js(jQuery)/css?

4
  • А блок с картинкой у вас сверстан? Вставьте его в вопрос
    – Cheg
    17 июл 2017 в 21:47
  • @Chag ок, добавил 17 июл 2017 в 21:51
  • А картинка должна появляться сразу или при каком-то событии?
    – Cheg
    17 июл 2017 в 21:52
  • @Chag, неважно, можно и сразу. 17 июл 2017 в 21:54

1 ответ 1

1

Для этого можно использовать jQuery метод .slideDown():

$('.pic-inner').slideDown(1000);
#pic {
  position: relative;
  margin: auto;
  width: 300px;
  height: 300px;
}

.pic-inner {
  width: 300px;
  height: 300px;
  background: #000 url(pic.jpg);
  background-position: center bottom;
  position: absolute;
  left: 0px;
  bottom: 0px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic">
  <div class="pic-inner"></div>
</div>

5
  • Не совсем. Так картинка двигается внутри блока. То есть получается, что енот высовывает голову. Нужно, чтобы картинка открывалась, енот оставался неподвижным. 17 июл 2017 в 22:02
  • @ArturKharchenko добавьте в css background-position:center bottom;
    – Cheg
    17 июл 2017 в 22:04
  • Супер, теперь работает. Спасибо! 17 июл 2017 в 22:05
  • @ArturKharchenko пожалуйста. Также буду благодарен, если проголосуете за ответ, нажав стрелочку вверх)
    – Cheg
    17 июл 2017 в 22:07
  • Рад бы, но не могу. Не позволяет низкая репутиция, необходимо 15 баллов. 17 июл 2017 в 22:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.