Html 在页面加载时显示滑动div

我在页面左侧固定了一个div，该div开始部分隐藏在页面之外，然后在鼠标上方平滑地滑入。我想做的是让div在页面加载时完全可见，然后在几秒钟后滑开，然后使用其正常的鼠标悬停功能

有关分区：

HTML

<a href="#" target="_blank">
    <div id="calculator">Novated Lease Calculator</div>
</a>

如果可能的话，我想使用CSS解决方案；但是，如果没有其他选择，javascript也可以

#calculator {
width: 297px;
height: 60px;
margin: 0;
padding: 0;
text-indent: -9999px;
background: url("../img/calculator-button.png") no-repeat;
position: fixed;
top: 218px;
left: 0;
z-index: 999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

Javascript

function onload() {
$("#calculator").css("left", "-247px");
}

---

我没有测试它，但如果没有弄错的话，我就是这样做的。

试试这个。如果你想上下滑动，可以使用下面的代码

$(document.ready(function(){
     $('div').mouseover(function(){
           $(this).slideDown('slow');
     });
     $('div').mouseout(function(){
           $(this).slideUp('slow');
     });
});

否则你可以检查这个js小提琴

---

您可以通过纯css来实现这一点，尽管需要一些技巧。试试这个

CSS

#calculator {
    width: 297px;
    height: 60px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    background: url("../img/calculator-button.png") no-repeat;
    position: fixed;
    top: 218px;
    left: -247px;
    z-index: 999;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#calculator:hover {
    left: 0;
}

工作示例是

来解释我做了什么。我已经使用animation css3属性在加载时为元素设置了一次动画。这是一个0-0.1%的解决方案。这将使元素保持在正确的位置，然后将其向左移动：0，像风一样快，然后启动平滑动画以再次隐藏此元素。剩下的就是你的悬停解决方案

你想玩多少就玩多少。如果您想让元素停留更长的时间，只需在20%处添加动画步骤{left:0px；}

请注意，css3动画在IE9等旧浏览器上不起作用。浏览器检查列表

检查此项

只需将其添加到代码中

#calculator {
width: 297px;
height: 60px;
margin: 0;
padding: 0;
text-indent: -9999px;
background: #eaeaea;
position: fixed;
top: 218px;
left: -247px;
z-index: 999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

animation-name: slide;
animation-duration:5s; /* adjust the tming accordingly for how long the slide should stay */ 
animation-delay:0.5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;

-webkit-animation-name: slide;
-webkit-animation-duration:5s; /* adjust the tming accordingly for how long the slide should stay */ 
-webkit-animation-delay:0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

}

@keyframes slide {
  0%   { left:-247px;}
  50%   { left:0px;}
  100%   { left:-247px;}  
}

@-webkit-keyframes slide  {

  0%   { left:-247px;}
  50%   { left:0px;}
  100%   { left:-247px;} 

}

#calculator:hover {
  left: 0;
}

---

文本缩进：-9999px？您想要实现什么？它用于隐藏覆盖的文本，以便只显示背景图像。我在问题中没有看到jQuery标记。是的，没有jQuery标记，但他告诉我们，如果没有其他选择，javascript是可以的。@kamilkpjavascript alternative，不一定是jQuery。我用纯javascript找不到任何滑动效果，所以我用了jQuery。如果你发现任何滑动效果，请告诉我们。我很乐意学习新东西。@kamilkp如果没有jQuery标记，并不意味着我们不应该用它回答。我们应该接受所有的建议。旁注：注意旧的浏览器（如IE9）
#calculator {
    width: 297px;
    height: 60px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    background: #f00;
    position: fixed;
    top: 218px;
    left: -247px;
    z-index: 999;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    animation: slideOnLoad 1s 1;
    -webkit-animation: slideOnLoad 1s 1;
}

@keyframes slideOnLoad
{
    0% {left:-247px;}
    0.1% {left:0px;}
    100% {left:-247px;}
}
@-webkit-keyframes slideOnLoad
{
    0% {left:-247px;}
    0.1% {left:0px;}
    100% {left:-247px;}
}

#calculator:hover {
    left: 0;
}

#calculator {
width: 297px;
height: 60px;
margin: 0;
padding: 0;
text-indent: -9999px;
background: #eaeaea;
position: fixed;
top: 218px;
left: -247px;
z-index: 999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

animation-name: slide;
animation-duration:5s; /* adjust the tming accordingly for how long the slide should stay */ 
animation-delay:0.5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;

-webkit-animation-name: slide;
-webkit-animation-duration:5s; /* adjust the tming accordingly for how long the slide should stay */ 
-webkit-animation-delay:0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

}

@keyframes slide {
  0%   { left:-247px;}
  50%   { left:0px;}
  100%   { left:-247px;}  
}

@-webkit-keyframes slide  {

  0%   { left:-247px;}
  50%   { left:0px;}
  100%   { left:-247px;} 

}

#calculator:hover {
  left: 0;
}

 calculator{ left:-247px; }
 #calculator:hover{ left:0; }