JQuery Анимация в нижней части экрана

Question

Я пытаюсь анимировать изображение слева направо, а затем справа налево внизу. Это код, который я использую, который работает нормально.

Это 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> 

Я хочу эту анимацию в нижней части экрана с прозрачным фоном div. Когда я добавляю эту строку

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

Тогда анимация не работает. Кто-нибудь может помочь мне в этом вопросе? Заранее спасибо.

Answer 1

просто удалить верхний: 50px; от вашего стиля изображения и использовать CSS для одушевленного DIV

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

DEMO

Answer 2

Попробуйте следующее:

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

Проверить Fiddle.

Answer 3

Попробуйте изменить top свойство calc(70%); 70% родительского элемента 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> 

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

Answer 4

Просто удалите родительский «живой» ДИВ и стиль изображения «дно», как «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/