Question

我的页面左侧有一个div，它开始部分隐藏在页面之外，然后在鼠标悬停时顺利滑动。我想做的是让div在页面加载时完全可见，然后在几秒后滑开，然后具有正常的鼠标悬停功能。

有问题的div：

HTML

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

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;
}

如果可能，我想使用CSS解决方案;但是，如果没有其他选择，javascript就可以了。

Answer 1

#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");
}

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

Answer 2

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

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

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

http://jsfiddle.net/ravikumaranantha/Wtfpx/2/

Answer 3

document.onload = function(){
    var calc = document.getElementById('calculator');
    calc.style.left = '-247px';
    setTimeout(function(){
       calc.style.left = '';
    }, 2000); // few seconds e.g. 2 s
};

Answer 4

你可以通过纯css 来做到这一点，尽管有一种黑客攻击。试试这个

的 CSS 的

#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; }

工作示例为here

解释我的所作所为。我已经使用动画css3属性在加载时为元素设置动画。这里的一点点是0-0.1％的解决方案。这会使你的元素保持在正确的位置，然后将它移动到左边：0像风一样快速，并开始平滑动画再次隐藏这个元素。其余的是你的悬停解决方案。

你可以随心所欲地玩时间。如果你想让你的元素保持更长时间 - 只需添加20％的动画步骤{left：0px;}

请注意，css3 animate不适用于IE9等旧浏览器。检查浏览器列表here

Answer 5

选中此DEMO

只需将其添加到您的代码中

即可

#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;
}

Answer 6

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

在页面加载时显示滑动div

6 个答案: