从左到右滑动图像

问题描述：

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

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

我的代码是：

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

但这种方法是行不通的每一个期望。图像从左到右滑动，但不会加载整个图像，只有在动画结束时才能看到完整图像。

答

在这里你可以查看：

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

you can also use: toggle 

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

    or: 

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

答

可以使用animate代替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"/>

答

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

后显示完整的图像

答

我觉得你的问题是，动画在图像对象完全加载到浏览器之前就已经开始了。你应该看看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); 
}

从左到右滑动图像

相关推荐