Как выдвинуть элемент при загрузке страницы? - PullRequest
Новая
       6

Как выдвинуть элемент при загрузке страницы?

0 голосов
/ 10 ноября 2018

Вот пример этого с hover http://jsfiddle.net/MK87R/1/

Я хочу скользить по загрузке страницы, а не зависать. Как мне это сделать? Обратите внимание, я предпочитаю реагирующий раствор. Тем не менее, решение CSS / HTML тоже подойдет.

Вот пример кода: 

<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>

CSS: 

#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout_inner {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover {
    left: 250px;
}

#slideout:hover #slideout_inner {
    left: 0;
}

img {
    width: 100px;
    height: 100px;
}

Ответы [ 2 ]

0 голосов
/ 26 июля 2019

Я бы изменил :hover на класс .open, а затем добавил бы класс при загрузке тела: 

const slideout_el = document.getElementById('slideout')

window.onload = () => slideout_el.classList.add('open')
#slideout {
  position: fixed;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout.open {
  left: 250px;
}
#slideout.open #slideout_inner {
  left: 0;
}
img
{
    width:100px;
    height:100px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>
</body>
</html>
0 голосов
/ 10 ноября 2018

Вот решение с использованием JQuery и его метода .animate ().

http://jsfiddle.net/MK87R/510/

$('#slideout_inner').animate({left: 0});
...