从左到右滑动图像答案

【问题标题】：Sliding image from left to right从左到右滑动图像
【发布时间】：2017-04-14 17:39:51
【问题描述】：

我遇到了从左向右滑动图像的问题。

我想要什么：图片应该从屏幕左侧滑到右侧。

我的代码是：

$('image').show("slide", { direction: "right" }, 1200);

但这个解决方案并不符合预期。图像从左向右滑动，但并未加载整个图像，并且整个图像仅在动画结束时可见。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

你可以在这里查看：

 $('#hello').show('slide', {direction: 'right'}, 1000);

you can also  use: toggle

$(".slide-toggle").click(function(){
        $(".box").animate({
            width: "toggle"
        });

   or:

   $(".slidingDiv").toggle("slide");

【讨论】：

【解决方案2】：

您可以使用animate 代替show，因为使用 show 会在动画结束后显示完整的图像

$('#image').animate({right:'0px'},1200)

img{
  width: 100px;
  height: 100px;
  position: absolute
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img id="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"/>

【讨论】：

【解决方案3】：

我认为您的问题是动画在图像对象完全加载到浏览器之前开始。您应该查看 jquery 加载事件：https://api.jquery.com/load-event/ 并搜索问题“jquery image load callback”的答案，例如：jQuery or Javascript check if image loaded

在我看来，最好的方法是用 JS 创建图像对象，将其推送到 DOM 元素并启动动画，当图像完全加载时。

简而言之：

$("<img/>")
.attr("src", "/images/your-image.jpg")
.on('load', function() { startAnimation() })
.appendTo($('#imageContainer'));

var startAnimation = function(){
$('#hello').show('slide', {direction: 'right'}, 1000);
}

【讨论】：

【解决方案4】：

$(document).ready(function() {
  $("img").animate({
    marginLeft: "0px"
  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="frame" style="width: 300px; height:300px; overflow:hidden;">
  <img id="image" src="https://www.filterforge.com/more/help/images/size400.jpg" style='margin-left:-300px; height: 100%; width: 100%; '>
  </img>
</div>

【讨论】：