effects - animate image back to original position with jquery -

i trying animate image on hover , bring original position when mouse leaves, image animate before mouse leaves.

here code

$(document).ready(function(){     $('.logo').mouseenter(function(){         $('.logo').animate({left: "100px"});      });        $('.logo').mouseout(function(){       $('.logo').animate({right: "100px"});       });  }); 

you can use -= decrement property based on it's current value. note need perform on left property, right distance of element right of containing element , not correct value setting. can make code more succinct using hover() method. try this:

$('.logo').hover(function() {   $(this).animate({ left: "100px" });  }, function() {   $(this).animate({ left: "-=100px" });  });  

also note can achieve require in css alone using :hover pseudo selector , transition. try this:

.logo {    width: 200px;    height: 200px;    border: 1px solid #c00;    position: absolute;    transition: left .25s;    left: 0;  }  .logo:hover {    left: 100px;  }

<div class="logo">i logo!</div>