javascript - Make an image appear from left to right using jquery -
i close achieving goal. trying create image appear left right using jquery. if @ fiddle example see there wavy line appears left right. there 2nd wavy line stretches left right.
i want remove wavy line stretches left right keep wavy line appears smoothly left right
can 1 me?
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> - jsfiddle demo</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> <style type="text/css"> 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;} </style> <script type="text/javascript"> $(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); } }); </script> </head> <body> <div> <img id="waveline" src="http://www.tankten.com/codeimages/waveline.png"> </div> <div> <img id="myimg" src="http://www.tankten.com/codeimages/richtestslide2.png"> </div> <div> <img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png"> </div> <div id="baloon3"><img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" /></div> <div id="baloon2"><img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" /></div> <div id="baloon"><img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" /></div> </body> </html>
there no need jquery achieve this, css alone this.
you use parent div mask applying overflow: hidden on , animate width 0 381px(image's width) using css @keyframes.
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-container { position: relative; width: 0; height: 200px; overflow: hidden; -webkit-animation: lefttoright 3s ease-in infinite; animation: lefttoright 3s ease-in infinite; } #waveline { top: 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; } @-webkit-keyframes lefttoright { { width: 0; } { width: 381px; } } @keyframes lefttoright { { width: 0; } { width: 381px; } }<div id="waveline-container"> <img id="waveline" src="http://www.tankten.com/codeimages/waveline.png"> </div> <div> <img id="myimg" src="http://www.tankten.com/codeimages/richtestslide2.png"> </div> <div> <img id="graphoverlaylines" src="http://www.tankten.com/codeimages/graphoverlaylines.png"> </div> <div id="baloon3"> <img src="http://www.tankten.com/codeimages/richtest3.png" width="381" height="50px" /> </div> <div id="baloon2"> <img src="http://www.tankten.com/codeimages/richtest2.png" width="381" height="50px" /> </div> <div id="baloon"> <img src="http://www.tankten.com/codeimages/richtest.png" width="381" height="50px" /> </div>
Comments
Post a Comment