jQuery-animate position start
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-color: #333;
}
li {
position: absolute;
left: 0;
top:1in;
width: 1in;
height: 1in;
background-color: #ce19a6;
margin: 24px;
opacity: .25;
border: 0px;
list-style-type: none;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$(function() {
//js available
console.log("reaady");
//animate with opacity and left values
//note that position :absolute is declared in the css
$('li').mouseover(function() {
$('li').animate({
opacity: 1, //first value then comma
left: 50, //second value
width: 500
},
150,
'linear'); // 'linear' or 'swing
});
//add a mouseout event listener that resets the opacity and left values
$('li').click(function() {
$('li').animate({
opacity: 0.25,
left: 0,
width: 1 in
},
150,
'swing');
});
//close jQuery
});
Forked from glenda drew's Pen target practice complete.
A Pen by Spencer Mathews on CodePen.
<nav>
<ul>
<li></li>
</ul>
</nav>