Animated Hover Brackets

HTML

<div class="item">
 <span class="bracket">[</span>blank<span class="rightbracket">]</span>Gallery
</div>

CSS

.listWrap {}

.list {
  font-family: arial;
  list-style-type: none;
  width: 10%;
}

.item {
  position: relative;
}

.bracket {
  position: relative;
}

.rightbracket {
  position: relative;
}

JavaScript

$(".item").each(function() {

  $(this).hover(

    function() {
      $(this).find('.bracket').stop().animate({
        opacity: 1,
        left: '0px'
      }, 'fast');
      $(this).find('.rightbracket').stop().animate({
        opacity: 1,
        left: '0px'
      }, 'fast');

    },

    function() {
      $(this).find('.bracket').stop().animate({
        opacity: 0,
        left: '-10px'
      }, 'fast');
      $(this).find('.rightbracket').stop().animate({
        opacity: 0,
        left: '10px'
      }, 'fast');
    });

});