Question

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

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

我的代码是：

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

但是这个解决方案不符合预期。图像从左向右滑动，但不会加载整个图像，只有在动画结束时才能看到完整图像。

Answer 1

在这里你可以查看：

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

you can also  use: toggle

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

   or:

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

Answer 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"/>

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我认为您的问题是动画在图像对象完全加载到浏览器之前启动。你应该检查jquery加载事件：https://api.jquery.com/load-event/ 并搜索问题“jquery图像加载回调”的答案，例如：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 个答案: