1

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).

  • take a look at this: https://stackoverflow.com/questions/14193028/fade-effect-left-to-right-on-a-image – Zombie Sep 07 '18 at 12:02
  • refer the link given: https://stackoverflow.com/questions/14823305/slide-div-left-right-using-jquery – Ram Sep 07 '18 at 12:03

1 Answers1

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>
Ramesh
  • 2,297
  • 2
  • 20
  • 42