How do I make an image fade in sideways (left to right side & vice versa) in JQuery?

Question

So far I know you can make it statically fade in like this:

 $("#element").fadeIn()

I want to make an image fade in in a sliding sideways sort of way like when a curtain at a show get pulled to the side and the background for the performance is revealed (not stretching, but fade-sliding).

Answer 1

Here is a sample example that I can provide. If you have doubt, leave a comment.

 $(document).ready(function() { $("#hide").click(function() { $("#panel").hide("slide", { direction: "left" }, 1000); }); $("#show").click(function() { $("#panel").show("slide", { direction: "left" }, 1000); }); }); 

 #panel { height: 100px; padding: 50px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #hide { padding: 20px; width: 200px; background: red; color: white; } #show { padding: 20px; width: 200px; background: blue; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <div id="hide">Click here to Hide the Pannel</div> <div id="show">Click here to Show Pannel</div> <div id="panel">This is your pannel</div>