画像を左から右にスライド

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

を、あなたはショーがアニメーション

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

後に完全な画像を表示します使用するなど animateの代わり showを使用することができます

Answer 4

あなたの問題は、イメージオブジェクトがブラウザに完全にロードされる前にアニメーションが開始されたことだと思います。 あなたはjQueryのloadイベントをチェックアウトする必要があります：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); 
}