定位JS动画DIV

时间:2013-08-08 16:27:58

标签: javascript jquery html css jquery-animate

我正在尝试让DIV移动到JS并将它们放在页面的右侧,我已经完成了动画脚本,但是位置不对。在移动电话上,它位于我#header部分中的其他div之上,而且位于左侧。在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();
});

2 个答案:

答案 0 :(得分:1)

就像pixelcdv所说的那样,CSS3 animations对于像这样的简单动作来说是完美的。

Here's a quick animation我开始使用你的代码(所有百分比)

它的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%;
    }
}

答案 1 :(得分:0)

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