0

我正在尝试使 3 DIVs 移动JS并将它们放在页面的右侧，我已经完成了动画脚本，但是位置不正确。在手机上，它在我的其他 div#header部分上方，并且在左侧。PC:s它离左边很远。有没有办法让我的动画保持这种方式，但让它在包装器内？所以它不会改变它在手机和PC上的位置：s？

HTML：

  <div class="wrapper">
    <div id="intro-right">
       <div id="clouds-1"></div>
       <div id="clouds-2"></div>
       <div id="clouds-3"></div>
    </div>
  </div>

CSS：

div.wrapper {
    margin: 0 auto;
    padding: 0 20px;
    min-width: 1024px;
    width: 1024px;
}

div#intro-right {
    float: right;
}

div#clouds-1 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 100px;
    right: 150px;
    background: url("img/clouds_bg_1.png") no-repeat;
    opacity: 0;
}

div#clouds-2 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 110px;
    right: 150px;
    background: url("img/clouds_bg_2.png") no-repeat;
    opacity: 0;
}

div#clouds-3 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 130px;
    right: 150px;
    background: url("img/clouds_bg_3.png") no-repeat;
    opacity: 0;
}

JS：

$(document).ready(function() {
    $("div#clouds-1").animate({
        opacity:'0.4'
    }, 1450);

    $("div#clouds-2").animate({
        opacity:'0.6'
    }, 1450);

    $("div#clouds-3").animate({
        opacity:'0.8'
    }, 1450);
});

$(document).ready(function() {
    function moveRight1() {
        $("div#clouds-1").animate({
           top:'-=24px',
           right: '+=50px',
           opacity: '0.9'
        }, 8000, moveLeft1);
    }

    function moveLeft1() {
        $("div#clouds-1").animate({
            top:'+=24px',
            right: '-=50px',
            opacity: '0.4'
        }, 8000, moveRight1);
    }
    moveRight1();

    function moveRight2() {
        $("div#clouds-2").animate({
           top:'-=24px',
           right:'-=50px',
           opacity: '0.9'
        }, 8000, moveLeft2);
    }

    function moveLeft2() {
        $("div#clouds-2").animate({
            top:'+=24px',
            right:'+=50px',
            opacity: '0.6'
        }, 8000, moveRight2);
    }
    moveRight2();

    function moveRight3() {
        $("div#clouds-3").animate({
           top:'+=24px',
           right:'+=100px',
           opacity: '0.4'
        }, 8000, moveLeft3);
    }

    function moveLeft3() {
        $("div#clouds-3").animate({
            top:'-=24px',
            right:'-=100px',
            opacity: '0.8'
        }, 8000, moveRight3);
    }

    moveRight3();
});
4

2 回答 2

1

就像 pixelcdv 所说，CSS3 动画非常适合像这样的简单运动。

这是我使用您的代码制作的快速动画（全部以百分比表示）

它的 CSS 基于您的 html：

div#clouds-1 {
    position: absolute;
    width: 30%;
    height: 20%;
    top: 15%;
    left: 35%;
    background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudOne 16s infinite;
    -moz-transition: cloudOne 16s infinite;
    -o-transition: cloudOne 16s infinite;
    transition: cloudOne 16s infinite;
    animation: cloudOne 16s infinite;
}
@keyframes cloudOne {  
    0% {
        top:15%;
        left: 35%;
    }
    50% {
        top:7%;
        left: 20%;
    }
    100% {
        top:15%;
        left: 35%;
    }
}

div#clouds-2 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:20%;
    left: 45%;
    background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudTwo 16s infinite;
    -moz-transition: cloudTwo 16s infinite;
    -o-transition: cloudTwo 16s infinite;
    transition: cloudTwo 16s infinite;
    animation: cloudTwo 16s infinite;
}

@keyframes cloudTwo {  
    0% {
        top:20%;
        left: 45%;
    }
    50% {
        top:35%;
        left: 15%;
    }
    100% {
        top:20%;
        left: 45%;
    }
}

div#clouds-3 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:30%;
    left: 50%;
    background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudThree 16s infinite;
    -moz-transition: cloudThree 16s infinite;
    -o-transition: cloudThree 16s infinite;
    transition: cloudThree 16s infinite;
    animation: cloudThree 16s infinite;
}

@keyframes cloudThree {  
    0% {
        top:30%;
        left: 50%;
    }
    50% {
        top:5%;
        left: 65%;
    }
    100% {
        top:30%;
        left: 50%;
    }
}
于 2013-08-08T17:03:41.583 回答
0

我认为在您的情况下，使用 CSS3 动画会更好。这样，您只需调用$('div#clouds-1').addClass(<new class that sets the position on the right>)而不是 .animate() 并调整 css 以在移动设备和桌面上工作

于 2013-08-08T16:32:39.467 回答