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 个答案: