1
На моем веб-сайте у меня есть панель для зависания в левом верхнем углу, когда вы наводите на нее курсор, она переходит наружу и отображает кнопку, которую вы можете нажать, чтобы отображать больше параметров, но когда вы вдруг наведите указатель мыши и уходите опять же, это не выглядит гладко, так как кнопка не исчезает с помощью 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>
Я бы не анимировать ширину бруска парения, но и выравнивание его. Таким образом, ширина остается неизменной все время, но когда вы наводите на нее курсор, она постепенно перемещается вправо, что имеет тот же эффект. Таким образом, кнопка, содержащаяся внутри, не должна обертываться. Еще один плюс заключается в том, что кнопка движется тоже, что выглядит лучше imo. – JohnDoe90
Не могли бы вы показать мне ответ в коде, пожалуйста? – user4191887
Извините, мой CSS очень шаткий. Раньше я обычно делал подобные вещи с помощью jQuery. Дайте полосе зависания фиксированный witdth и анимируйте свойство 'left', чтобы переместить его влево и вправо. Если jQuery подходит для вас: http://api.jquery.com/animate/ – JohnDoe90