如何在 JQuery 中使图像横向淡入淡出(从左到右，反之亦然)？

Question

到目前为止，我知道你可以像这样让它静态淡入：

$("#element").fadeIn()

我想让图像以横向滑动的方式淡入，就像演出的幕布被拉到一边，表演的背景被揭示出来(不是拉伸，而是淡入淡出滑动(。

Answer 1

这是我可以提供的示例示例。如果您有任何疑问，请发表评论。

$(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>