我怎样才能让图像滑入我网站的页面？

Question

目前我所有的代码都给我一张静态图片。但是我希望它从右侧滑入。谁能告诉我应该导入哪个 jquery 库，我的代码正确吗？

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>
  $(document).ready(function(){
     $("#mepicintro").show("fade",500);
     $("#mepicintro").delay(5500).hide("slide",{direction:'right'},500);
  });  
</script>


<div class="eight columns">
<img id="mepicintro" src="images/my_computer.png"  width="400px" height"400px">
</div>

Answer 1

CSS3动画！

$("button").click(function(){
    $("#slider").addClass("in");
});

body{
  overflow:hidden;
  }

#slider{
  -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
  
  display: block;
  height: 300px;
  width: 100%;
   position: absolute;
  background:green;
  top:30px;
  left:100%;
 
  }

#slider.in{
  left:0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Slide in!</button>
<div id="slider"></div>

Answer 2

有很多方法可以实现这一点，举个例子，你可以使用jQuery animate() 将图像滑入，而无需使用任何额外的库。将 overflow:hidden; 添加到 body 以避免显示滚动条并将图像定位在外部：

 $(document).ready(function () {
     $('#mepicintro').animate({
         'left': '300px'
     }, 500);
 });

body {
    overflow:hidden;
}
#mepicintro {
    position:absolute;
    right:-300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight columns">
    <img id="mepicintro" src="http://placekitten.com/g/300/300" width="300px" height="300px"/>
</div>

我怎样才能让图像滑入我网站的页面？

How can i get the image to slide into the page on my website?

jquery

jquery-ui