title: Make an image appear from left to right using jquery
body: <p>I am very close to achieving my goal. I am trying to create an image to appear from left to right using jQuery. If you look at my <a href="https://jsfiddle.net/richchatfield/qbnwmyp1/" rel="nofollow">fiddle example</a> You will see that there is a wavy line that appears from left to right. There is also a 2nd wavy line that stretches from left to right.</p>
  
  <p>I want to remove the wavy line that stretches from left to right but keep the wavy line that appears smoothly from left to right</p>
  
  <p>Can some one help me?</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt; - jsFiddle demo&lt;/title&gt;
  
  
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
  
  body {
  background-color: #003366;
  margin: 0;
  }
  
  #myImg
  {
  top: 0px;
  width:0px;
  height:200px;
  position:absolute;
  left:0px;
  background-image:url('http://www.tankten.com/codeimages/richtestslide2.png'); 
  background-repeat:no-repeat;
  opacity: 0.5;
  z-index: 100;
  }
  
  #graphoverlaylines {
  position:absolute;
  left: 0px;
  top: 0px;
  z-index: 300;
  }
  
  #waveline {
  top: 0px;
  width:0px;
  height: 200px;
  position:absolute;
  left: 0px;
  background-image:url('http://www.tankten.com/codeimages/waveline.png'); 
  background-repeat:no-repeat;
  z-index: 250;
  
  }
  
  #baloon { width:381px; height:50px; position:absolute; left:0px; top:150px; z-index: 200;}
  #baloon2 { width:381px; height:50px; position:absolute; left:0px; top:100px; z-index: 200;}
  #baloon3 { width:381px; height:50px; position:absolute; left:0px; top:50px; z-index: 200;}
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(function(){
  $(document).ready(function() {
  repeat();
  });
  
  function repeat()
  {
  
  $("#myImg").animate({
      top: '0px',
      width: '328px',
      height: '200px'
  }, 6000,repeat);
  $("#myImg").fadeOut(1000);
  $("#myImg").animate({
      top: '0px',
      width:'0px',
      height: '200px',
  }, 0);
  $("#myImg").fadeIn(10);
  
  }
  
  
  });
  
  
  $(function(){
  $(document).ready(function() {
  repeat2();
  });
  
  function repeat2()
  {
  $("#waveline").animate({
      top: '0px',
      width: '380px',
      height: '200px'
  }, 6000,repeat2);
  $("#myImg").fadeOut(1000);
  
  $("#waveline").animate({
      top: '0px',
      width:'0px',
      height: '200px',
  }, 10);
  $("#waveline").fadeIn(100);
  
  }
  
  
  });
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div&gt;
  &lt;img id="waveline" src="http://www.tankten.com/codeimages/waveline.png"&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
  &lt;img id="myImg" src="http://www.tankten.com/codeimages/richtestslide2.png"&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png"&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="baloon3"&gt;&lt;img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" /&gt;&lt;/div&gt;
  &lt;div id="baloon2"&gt;&lt;img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" /&gt;&lt;/div&gt;
  &lt;div id="baloon"&gt;&lt;img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" /&gt;&lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>