從左到右滑動圖像

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爲使用展將動畫

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

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

後顯示完整的圖像

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); 
}