CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4191887
user4191887

Reputation: 277

Auto Hiding button

On my website I have a hover bar at the top left that when you hover over it, it transitions outward and displays a button which you can press to display more options, but when you suddenly mouse over and go away again, it doesn't look smooth as the button doesn't fade with the div and the button kind of turns square when it the div fades back in. How could I fix it? 

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>

Upvotes: 1

Views: 1899

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

add this for each of your #fade and #button-change in your css 

 #fade{
     overflow:hidden;
    }

and spacify the width to button

#button-change{
 width: 100px;
}

but let me say that's not a good solution .. you can margin left your #fade and animate it .. I think it will be better

DEMO HERE Using js in css 

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

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

and use all of your code inside just one $(document).ready no need to repeat that

DEMO HERE Using css you can do that with pure css

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

Upvotes: 1

Nima Derakhshanjan
Nima Derakhshanjan

Reputation: 1404

i know this is not the best answer but solves the problem,hope it helps

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

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

Demo

Upvotes: 0

Related Questions