My current code is causing $('#intro').fadeOut to activate even when I am not hovering on $('arena').hover. Are there any other issues in the code that would prevent it from working correctly?
$(document).ready(function() {
$('#arena').hover(); {
$('#intro').fadeOut('slow'); {
}
}
});html, body {
padding: 0 autp;
margin: 0 auto;
}
#cirkle {
height: 150px;
width: 150px;
background-color: blue;
border-radius: 25%;
transition: all 1s ease-in-out;
border: black 1px solid;
position:relative; /*gotta put it here too to start it off*/
top:35%;
left:35%;
}
#intro {
text-align: center;
margin-top: 75px;
overflow: hidden;
font-family: 'Indie Flower', cursive;
font-size: 50px;
}
body {
background-color: #cccccc;
}
#cirkle:hover {
border: black 1px solid;
background-color: red;
border-radius: 50%;
height: 75px;
width: 75px;
transition: 1.5s;
-webkit-animation-name: cruise;
-webkit-animation-duration: 60s;
animation-name: cruise;
animation-duration: 50s;
position:relative;
top:50%;
left:50%;
transition: all 1s linear;
}
#arena {
border: 5px dashed grey;
margin: 0 auto;
width: 550px;
height: 550px;
margin-top: 150px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}
@keyframes cruise {
0% {left:35%; top:35%;}
5% {left:40%; top:40%;}
10% {left:45%; top:45%;}
15% {left:50%; top:43%;}
20% {left:57%; top:50%;}
25% {left:67%; top:40%;}
30% {left:70%; top:27%;}
35% {left:55%; top:35%;}
40% {left:35%; top:67%;}
45% {left:15%; top:40%;}
50% {left:40%; top:65%;}
55% {left:50%; top:25%;}
60% {left:82%; top:65%;}
65% {left:26%; top:15%;}
70% {left:69%; top:70%;}
75% {left:85%; top:15%;}
80% {left:36%; top:78%;}
85% {left:65%; top:41%;}
90% {left:85%; top:26%;}
95% {left:58%; top:78%;}
100% {left:35%; top:35%;}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>
Test
</title>
<script src="script.js"> </script>
<body>
<h1 id="intro">
<ins>HÅLL MUSEN PÅ DEN BLÅA FYRKANTEN</ins>
</h1>
<div id="arena">
<div id="cirkle">
</div>
</div>
</body>
</html>