Cacher is the code snippet organizer for pro developers

* {
  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
});

<nav>
  <ul>
    <li></li>
  </ul>
</nav>