Jquery Animation at the bottom of the screen

Question

I am trying to animate image from left to right and then right to left at the bottom. This is the code i am using which is working fine.

This is the Demo .

function moveRight(){
        $("#b").animate({left: "+=300"}, 2000,moveLeft)
    }

function moveLeft(){
        $("#b").animate({left: "-=300"}, 2000,moveRight)
    }

$(document).ready(function() {

       moveRight();

});

<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
</div>

I want this animation at the bottom of the screen with the transparent div background. When i am adding this line

<div id="animate" style="position:fixed; bottom:0px; right: 5px; z-index: 999">

Then the animation is not working. Any one can help me in this issue? Thanks in advance.

Answer 1

Try adjusting top property to calc(70%) ; 70% of parent element height

<div id="animate">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:calc(70%)"/>
</div>

jsfiddle http://jsfiddle.net/oa5pcfqe/2/ , https://jsfiddle.net/oa5pcfqe/2/embedded/result/

Answer 2

just remove top:50px; from your image style and use css for animate div

#animate{
    position: fixed;
    bottom: 0;
    overflow:hidden;
    left:0;
    right:0;
    height: 100px;
    background: #eee;
}

DEMO

Answer 3

Try following:

<div id="animate" style="position:fixed; height:100px; bottom:0px; left: 5px; z-index: 999">
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:0px"/>
</div>

Check Fiddle.

Answer 4

Just remove the parent "animate" div and style the image "bottom" as "0px".

<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; bottom:50px"/>

Demo

https://jsfiddle.net/oa5pcfqe/5/