自动隐藏按钮

在我的网站上，我在左上角有一个悬停栏，当您将鼠标悬停在上方时，它会向外转换并显示一个按钮，您可以按来显示更多选项，但是当您突然鼠标悬停并离开再次，它看起来并不平滑，因为按钮不会与div褪色，并且按钮会在div淡入时变成方形。我该如何修复它？自动隐藏按钮

function myFunction() { 
 
    for (var i = 0; i < 500; i++) { 
 
    var x = Math.random() * screen.width; 
 
    var y = Math.random() * screen.height; 
 
    var star = document.createElement('div'); 
 
    star.className = 'star'; 
 
    star.style.left = x + 'px'; 
 
    star.style.top = y + 'px'; 
 
    document.body.appendChild(star); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $('.mercury-lines').toggle(); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#fade").hover(function() { 
 
    $("button").fadeToggle(1500); 
 
    }); 
 
});

html { 
 
    background-color: #000; 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
} 
 
#fade { 
 
    width: 20px; 
 
    height: 100px; 
 
    background: #848484; 
 
    transition: width 2s; 
 
    -webkit-transition: width 2s; 
 
    /* Safari 3.1 to 6.0 */ 
 
    position: absolute; 
 
    border-radius: 10%; 
 
    top: 10px; 
 
    left: -8px; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
} 
 
#fade:hover { 
 
    width: 200px; 
 
} 
 
.star { 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 1px; 
 
    background: white; 
 
    z-index: -1; 
 
} 
 
.sun { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
    border-radius: 50%; 
 
    /*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/ 
 
} 
 
#button-change { 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 3px; 
 
    -moz-border-radius: 15px; 
 
    -webkit-border-radius: 15px; 
 
    outline: none; 
 
    display: none; 
 
} 
 
.mercury { 
 
    position: absolute; 
 
    height: 18px; 
 
    /*25px for both*/ 
 
    width: 18px; 
 
    margin-left: 25px; 
 
    border-radius: 50%; 
 
    /*box-shadow: green 0 0 25px;*/ 
 
} 
 
.mercury-orbit { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -101px; 
 
    margin-top: -101px; 
 
    -webkit-animation: spin-left 30s linear infinite; 
 
} 
 
.mercury-lines { 
 
    display: none; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    height: 225px; 
 
    width: 225px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -113px; 
 
    margin-top: -113px; 
 
} 
 
.moon { 
 
    height: 10px; 
 
    width: 10px; 
 
} 
 
.moon-orbit { 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: 6px; 
 
    margin-bottom: -34px; 
 
    border: 1px solid rgba(255, 0, 0, 0.1); 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-left 4s linear infinite; 
 
} 
 
@-webkit-keyframes spin-left { 
 
    100% { 
 
    -webkit-transform: rotate(-360deg); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Solar System</title> 
 
    <link rel='stylesheet' type='text/css' href='stylesheet.css' /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script type='text/javascript' src='script.js'></script> 
 
</head> 
 

 
<body onload="myFunction()"> 
 
    <img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png"> 
 
    <div class="mercury-lines"> 
 
    </div> 
 

 
    <div class="mercury-orbit "> 
 
    <img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" /> 
 
    </div> 
 
    <div id="fade"> 
 
    <button id="button-change">Toggle Orbits</button> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2014-12-07 user4191887

我不会动画悬停条的宽度，但它的定位。因此，宽度始终保持不变，但当您将鼠标悬停在其上时，宽度会逐渐向右移动，具有相同的效果。这样，包含在里面的按钮就不必包装了。另外一个优点是按钮也移动了，看起来更好看。 – JohnDoe90 2014-12-07 19:22:12

你能告诉我代码中的答案吗？ – user4191887 2014-12-07 19:23:15

对不起，我的CSS很不稳定。在过去，我通常使用jQuery做这种事情。给悬停酒吧一个固定witdth和动画的'左'属性左右移动。如果你可以接受jQuery：http://api.jquery.com/animate/ – JohnDoe90 2014-12-07 19:31:46

在你的CSS

#fade{ 
    overflow:hidden; 
    }

添加此为每个#fade和＃键变的和spacify宽度按钮

#button-change{ 
width: 100px; 
}

但让我说这不是一个好的解决方案..你可以保留你的#fad e和动画它。我认为这将是在CSS

#fade{ 
     margin-left :-180px; 
    }

更好

DEMO HERE Using js 在JS

$(document).ready(function(){ 
     $('#fade').on('mouseenter',function(){ 
     $(this).stop().animate({'margin-left':'0px'},2000); 
     }); 
     $('#fade').on('mouseleave',function(){ 
     $(this).stop().animate({'margin-left':'-180px'},2000); 
     }); 
    });

，并使用所有的代码只是一个$（文件）内。准备好无需重复说明

DEMO HERE Using css你可以用纯CSS做到这一点

#fade{ 
    margin-left :-180px; 
    transition-duration: 2s; 
} 
#fade:hover{ 
    margin-left: 0px; 
    transition-duration: 2s; 
}

来源

2014-12-07 19:21:37

你可以给我一个演示，因为它不适合我吗？ – user4191887 2014-12-07 19:45:08

我用演示更新了我的答案 – 2014-12-07 19:58:15

您知道为什么当您在访问网页后马上将鼠标悬停在它上面时，它有时会出现毛刺？它喜欢进去，然后再进出？ – user4191887 2014-12-07 20:59:58

我知道这是不是最好的答案，但解决了这个问题，希望它有助于

$(document).ready(function() { 
    $("#fade").mouseover(function() { 
    $("button").fadeIn(1500); 
    }); 

    $("#fade").mouseout(function() { 
    $("button").hide(); 
    }); 
});

Demo

来源

2014-12-07 19:36:49

您可否详细说明一下？为什么这不是最好的答案？ – Pavlo 2014-12-07 20:42:47

自动隐藏按钮

回答

相关问题