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

尝试将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>

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

Answer 2

删除顶部：50px;从您的图像样式和使用CSS动画div

class ProductGallery extends Eloquent implements StaplerableInterface {
     public function __construct(array $attributes = array()) {
        $this->hasAttachedFile('product_gallery', [
                'styles' => [
                        'thumb' => ['dimensions' => '100x100#' ],                       
                        'gallery' => ['dimensions' => '1024x' ],

                ],
                'url' => '/uploads/product/'.$attributes['product_id'].'/gallery/:id/:style/:filename',                   
        ]);
...

DEMO

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>

检查Fiddle.

Answer 4

只需删除父级＆＃34;动画＆＃34; div＆style the image＆＃34; bottom＆＃34; as＆＃34; 0px＆＃34;。

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

Jquery动画在屏幕的底部

4 个答案: