Sliding image from left to right

Question

I'm facing an issue with sliding an image from left to right.

What do I want: Image should slide from the left side of the screen to the right side.

My code is:

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

But this solution is not working a per the expectations. Image slides from left to right, but not the whole image is loaded and the full image is visible only at the end of the animation.

score 1 · Accepted Answer · answered Apr 14 '17 at 06:39

here you can check:

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

you can also  use: toggle

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

   or:

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

score 0 · Answer 2 · answered Apr 14 '17 at 07:18

you can use animate instead of show as using show will show complete image after the animation

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

Bhanu Tharun · Answer 3 · 2017-04-14T09:39:51.680

0

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

edited Apr 14 '17 at 09:39

answered Apr 14 '17 at 07:36

Bhanu Tharun

134
2
14

score 0 · Answer 4 · edited May 23 '17 at 12:34

I think your problem is that the animation started before image object was loaded completely to the browser. You should check out jquery load event: https://api.jquery.com/load-event/ And search for answers for question "jquery image load callback", e.g.: jQuery or Javascript check if image loaded

In my opinion the best way is create image object with JS, push it to DOM element and start animation, when image will be loaded completely.

In short:

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

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

Sliding image from left to right

4 Answers4