Не работает функция SlideUp для содержимого body

275
22 августа 2017, 13:25

function slideSecond() { 
  $('body').slideUp(2000, function() { 
      $(this).css("display", "block"); 
  }); 
 
} 
slideSecond(); 
body { 
  margin: 0; 
  padding: 0; 
  border: 5px dotted black; 
} 
nav { 
  min-width: 1000px; 
  position: fixed; 
  left: 20%; 
  border: 1px dotted black; 
  background-color: gray; 
  z-index: 999; 
  font-size: 20px; 
  font-weight: bold; 
  text-decoration: underline; 
} 
nav ul { 
  display: flex; 
  justify-content: space-between; 
  list-style-type: none; 
  padding-left: 0; 
} 
nav ul li { 
  padding: 10px; 
} 
#content { 
  text-align: center; 
  width: 20%; 
  margin: 0 auto; 
  height: 1500px; 
} 
#content img { 
  margin-top: 100px; 
} 
#content p { 
  text-align: justify; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav id="nav1"> 
  <ul> 
    <li>Главная</li> 
    <li>Товары</li> 
    <li>Контакты</li> 
  </ul> 
</nav> 
<div id="content"> 
  <img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/background.png"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nibh eu semper luctus. Aliquam eget tellus at velit pellentesque placerat. Ut ut massa metus. Curabitur id augue at augue sagittis sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id posuere massa, a condimentum sapien. Phasellus mollis faucibus tortor, eget ultricies eros cursus id. Suspendisse lacus diam, ultrices id est sed, sagittis condimentum libero. 
 
Donec quis accumsan lorem. In vehicula, massa eu dapibus scelerisque, lacus ligula ullamcorper lorem, interdum hendrerit nibh tellus in nunc. Aenean quis ligula mollis, volutpat ipsum in, lacinia dolor. Sed feugiat lacus at odio fermentum dapibus. Maecenas et tempor ligula, in tincidunt diam. Donec iaculis tortor mollis rhoncus placerat. Morbi at varius nulla. Ut aliquet neque nec ipsum fermentum sagittis. Duis ultrices, arcu eget pulvinar condimentum, sapien elit pharetra libero, vel elementum felis nunc in metus. Vestibulum gravida sit amet ligula et ornare. 
 
Mauris at velit commodo, interdum sapien quis, porttitor nunc. Sed ac volutpat mi, in vulputate quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer varius quam quis elit ornare molestie. Proin mollis lectus in molestie consequat. Vivamus mattis gravida hendrerit. Fusce commodo ac nibh in sagittis. Nam dapibus magna a sapien feugiat, blandit ultrices arcu lacinia. Quisque luctus hendrerit convallis. In porta, dolor ut venenatis sodales, enim nisl lacinia nunc, sit amet ornare nibh mi vitae nulla. Nullam turpis elit, pharetra ut lectus id, scelerisque finibus diam. Nullam scelerisque urna turpis. Aenean maximus pulvinar nulla, quis mollis felis dignissim et. 
 
Fusce non elementum nibh, quis vehicula dui. Praesent finibus a arcu in consectetur. Praesent vel viverra massa, at hendrerit lectus. Nullam placerat, leo sed rutrum luctus, libero ligula ultricies dolor, in aliquet tortor velit sed turpis. Maecenas quis mauris quis ligula eleifend maximus. Ut egestas in turpis a venenatis. Pellentesque in laoreet sem. Proin sit amet purus sit amet ipsum hendrerit molestie. Maecenas pharetra cursus velit, sit amet pellentesque nunc lobortis ut. 
 
Suspendisse purus nulla, pharetra eget nisi vitae, maximus vulputate quam. In dapibus pharetra tortor, ac elementum diam rutrum quis. Donec blandit, ante in mollis pulvinar, est ligula placerat nibh, ac pellentesque nisi risus et felis. Curabitur vitae finibus quam. In faucibus venenatis ipsum id fermentum. Suspendisse tempus mauris id pharetra laoreet. Donec mi orci, finibus in nisl malesuada, euismod vehicula massa. Aenean nec imperdiet mauris, nec venenatis tortor. Aliquam vitae leo placerat massa suscipit blandit eget ac metus. Proin vulputate lacus ante, in ullamcorper urna tempus sit amet. Integer lobortis interdum metus non porta. In vitae tortor massa. Morbi bibendum mattis mauris id tristique. Aenean mi arcu, vestibulum vel bibendum non, molestie non urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem ante, rhoncus sit amet arcu sed, pellentesque aliquam sem.</p> 
</div>

Должно быть: через 2 секунды после загрузки страницы всё содержимое страницы выезжает плавно снизу, но почему-то не получается...

'https://codepen.io/alexseveneight/pen/LjLYZO'
Answer 1

Можно попробовать сделать анимацию самому. Да, код чуть больше становится, за то ее можно кастомизировать как угодно!

function slideSecond() { 
  $('body').css({ 
    'position' : 'absolute', 
    'opacity' : '0', 
    'top' : '200px', 
    'left' : '0' 
  }); 
   
  setTimeout(()=>{ 
    $('body').animate({ 
      'top' : '0', 
      'opacity' : '1' 
    }, 300, function(){ 
      $(this).css({ 
        'position' : 'static' 
      }); 
    }); 
  }, 2000); 
   
} 
slideSecond();
body { 
  margin: 0; 
  padding: 0; 
  border: 5px dotted black; 
} 
nav { 
  min-width: 1000px; 
  position: fixed; 
  left: 20%; 
  border: 1px dotted black; 
  background-color: gray; 
  z-index: 999; 
  font-size: 20px; 
  font-weight: bold; 
  text-decoration: underline; 
} 
nav ul { 
  display: flex; 
  justify-content: space-between; 
  list-style-type: none; 
  padding-left: 0; 
} 
nav ul li { 
  padding: 10px; 
} 
#content { 
  text-align: center; 
  width: 20%; 
  margin: 0 auto; 
  height: 1500px; 
} 
#content img { 
  margin-top: 100px; 
} 
#content p { 
  text-align: justify; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav id="nav1"> 
  <ul> 
    <li>Главная</li> 
    <li>Товары</li> 
    <li>Контакты</li> 
  </ul> 
</nav> 
<div id="content"> 
  <img src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/background.png"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus nibh eu semper luctus. Aliquam eget tellus at velit pellentesque placerat. Ut ut massa metus. Curabitur id augue at augue sagittis sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id posuere massa, a condimentum sapien. Phasellus mollis faucibus tortor, eget ultricies eros cursus id. Suspendisse lacus diam, ultrices id est sed, sagittis condimentum libero. 
 
Donec quis accumsan lorem. In vehicula, massa eu dapibus scelerisque, lacus ligula ullamcorper lorem, interdum hendrerit nibh tellus in nunc. Aenean quis ligula mollis, volutpat ipsum in, lacinia dolor. Sed feugiat lacus at odio fermentum dapibus. Maecenas et tempor ligula, in tincidunt diam. Donec iaculis tortor mollis rhoncus placerat. Morbi at varius nulla. Ut aliquet neque nec ipsum fermentum sagittis. Duis ultrices, arcu eget pulvinar condimentum, sapien elit pharetra libero, vel elementum felis nunc in metus. Vestibulum gravida sit amet ligula et ornare. 
 
Mauris at velit commodo, interdum sapien quis, porttitor nunc. Sed ac volutpat mi, in vulputate quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer varius quam quis elit ornare molestie. Proin mollis lectus in molestie consequat. Vivamus mattis gravida hendrerit. Fusce commodo ac nibh in sagittis. Nam dapibus magna a sapien feugiat, blandit ultrices arcu lacinia. Quisque luctus hendrerit convallis. In porta, dolor ut venenatis sodales, enim nisl lacinia nunc, sit amet ornare nibh mi vitae nulla. Nullam turpis elit, pharetra ut lectus id, scelerisque finibus diam. Nullam scelerisque urna turpis. Aenean maximus pulvinar nulla, quis mollis felis dignissim et. 
 
Fusce non elementum nibh, quis vehicula dui. Praesent finibus a arcu in consectetur. Praesent vel viverra massa, at hendrerit lectus. Nullam placerat, leo sed rutrum luctus, libero ligula ultricies dolor, in aliquet tortor velit sed turpis. Maecenas quis mauris quis ligula eleifend maximus. Ut egestas in turpis a venenatis. Pellentesque in laoreet sem. Proin sit amet purus sit amet ipsum hendrerit molestie. Maecenas pharetra cursus velit, sit amet pellentesque nunc lobortis ut. 
 
Suspendisse purus nulla, pharetra eget nisi vitae, maximus vulputate quam. In dapibus pharetra tortor, ac elementum diam rutrum quis. Donec blandit, ante in mollis pulvinar, est ligula placerat nibh, ac pellentesque nisi risus et felis. Curabitur vitae finibus quam. In faucibus venenatis ipsum id fermentum. Suspendisse tempus mauris id pharetra laoreet. Donec mi orci, finibus in nisl malesuada, euismod vehicula massa. Aenean nec imperdiet mauris, nec venenatis tortor. Aliquam vitae leo placerat massa suscipit blandit eget ac metus. Proin vulputate lacus ante, in ullamcorper urna tempus sit amet. Integer lobortis interdum metus non porta. In vitae tortor massa. Morbi bibendum mattis mauris id tristique. Aenean mi arcu, vestibulum vel bibendum non, molestie non urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem ante, rhoncus sit amet arcu sed, pellentesque aliquam sem.</p> 
</div>

READ ALSO
ещё один вопрос про bbcode [требует правки]

ещё один вопрос про bbcode [требует правки]

вообщем есть картинка, <img src=/path/тутцифраgif class=smileicon>, нужно чтобы при попадании текста из блока, в textarea, чтобы картинки такого типа, заменялись...

209
Как привязать свойство border елементу при hover?

Как привязать свойство border елементу при hover?

Есть 3 дропдауна, сделанные на bootstrap(код одного из них):

297
ссылки на картинке

ссылки на картинке

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

264
Как вместить текст в одну строку

Как вместить текст в одну строку

Необходимо вместить название в одну строкуВ разметке есть блок див фиксированного размера

502