如何在頁面加載時滑出元素？

Question

這是一個帶有懸停的示例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;
}

Answer 1

這是使用 JQuery 及其 .animate() 方法的解決方案。

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

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

Answer 2

我會將: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>

如何在頁面加載時滑出元素？

問題描述

2 個解決方案

解決方案1
0 2018-11-10 03:18:41

解決方案2
0 2019-07-25 23:56:06

如何在頁面加載時滑出元素？

問題描述

2 個解決方案

解決方案1 0 2018-11-10 03:18:41

解決方案2 0 2019-07-25 23:56:06

解決方案1
0 2018-11-10 03:18:41

解決方案2
0 2019-07-25 23:56:06