Positioning JS animated DIVs

Question

I'm trying to make 3DIVs to move with JS and place them on the right side of the page, I've done the animate script, however the position isn't right. On mobile phones it goes above my other divs in #header section and it's to much to the left. And on PC:s it is to far from the left. Is there any way to keep my animation this way but to make it inside of the wrapper? So that It doesn't change it's position on mobile phones and 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();
});

Answer 1

Like pixelcdv said, CSS3 animations would be perfect for simple movement like this.

Here's a quick animation I came up using your code (all in percent)

The CSS for it based off of your 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%;
    }
}

Answer 2

I think in your case it would be better to use CSS3 animations. This way, you just have to call $('div#clouds-1').addClass(<new class that sets the position on the right>) instead of .animate() and adapt the css to work both on mobile and on desktop