屏幕底部的Jquery Animation

Question

我正在尝试在底部从左到右然后从右到左制作图像动画。 这是我正在使用的代码，可以正常工作。

这是演示 。

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>

我希望此动画在具有透明div背景的屏幕底部。 当我添加此行时

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

然后动画无法正常工作。 任何人都可以帮助我解决这个问题？ 提前致谢。

Answer 1

尝试将top属性调整为calc(70%) ； 父元素height 70%

<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

只需删除top：50px; 从您的图像样式开始，并使用css制作div动画

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

演示

Answer 3

请尝试以下操作：

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

检查小提琴。

Answer 4

只需删除父级“ animate” div并将图像“底部”设置为“ 0px”即可。

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

演示版

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