title: Make images Ease out on hover out without bugs
body: <p>I made a small image gallery, when hovering on an image it enlarges, when hovering out an image it goes back to normal size,unfortunately my hovering out function doesn't work well and I don't have an idea how to work it around, below is the code and <a href="http://jsfiddle.net/jpreynat/4e6po8z3/" rel="nofollow">here</a> is how it works (with bugs).</p>
  
  <pre><code>        #main{
          width: 1000px;
          height: 720px;
          border-bottom-style: solid;
          border-left-style: solid;
          border-right-style: solid;
          border-radius: 7px;
          border-color:silver
  
  
      }
  
      #title{
          position:relative;
          width:679px;
          font-size: 26px;
          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
          font-weight: bold;
          left:-4px;
          top:121px;
          border: solid;
          background-color:silver;
          text-align:center;
          z-index:-100;
  
  
      }
      #MainImage{
          background-image: url('zlf246.jpg');
          position:relative;
          width: 680px;
          height: 560px;
          margin-left: 155px;
          background-repeat: no-repeat;
          z-index:-200;
          border-bottom-style: solid;
          border-left-style: solid;
          border-right-style: solid;
          border-radius: 7px;
          border-color:silver
  
      }
  
          #PicGallaryR {
          width: 150px;
          height: 560px;
          float: right;
          direction: rtl;
  
      }
  
          #PicGallaryL {
          width: 150px;
          height: 560px;
          float: left;
  
      }
  
          #PicGallaryB {
          width: 993px;
          height: 145px;
  
      }
          a, .imgArt {
          width:150px;
          height:140px;
  
      }
  
      &lt;/style&gt;
          &lt;script&gt;
  
      $(function () {
      $(".imgArt").bind("mouseenter", function () {
  
          var n = $(this).clone();
          var of = $(this).offset();
          var isRight = $(this).closest("div").attr("id") == "PicGallaryR";
          var options = {
              position: 'absolute',
              top: of.top,
              margin: 0
          };
          if (isRight) options["right"] = 918;
          else options["left"] = of.left;
          n.css(options)
              .appendTo($("#main"))
              .animate({
              width: 300,
              height: 280
          });
  
  var originalWidth = $(this).css('width');
  var originalHeight = $(this).css('height');
  
  n.bind("mouseleave", function () {
      $(this).animate({
          width: originalWidth,
          height: originalHeight
      }, 300, "linear");
  });
      });
  
      }); 
          &lt;/script&gt;
      &lt;/head&gt;
  
  
      &lt;body&gt;  
  
          &lt;div id="main"&gt;
              &lt;div id="PicGallaryL"&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;div id="PicGallaryR"&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;div id="MainImage"&gt;
              &lt;div id="title"&gt;Sterling silver ethnic filigree ring, Yemenite Art&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div id="PicGallaryB"&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" &gt;&lt;/a&gt;
  
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>