2017-09-10 3 views
0

に動作していないこれは、あなたがこんにちは、私は4つのオブジェクトがループの中で左から右に移動したいが、私のコードは

<!DOCTYPE> 
<html> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</head> 

<body> 
<div id="clouds"> 
<img border="0" alt="animated clouds" src="clouds.png" > 
<script> 
$(document).ready(function() { 

function loop() { 
    $('#clouds').css({right:0}); 
    $('#clouds').animate ({ 
     right: '+=1400', 
    }, 5000, 'linear', function() { 
     loop(); 
    }); 
} 

loop(); 
}); 
</script> 
</div> 
<div id="clouds2"> 
<img border="0" alt="animated clouds" src="clouds2.png" > 
<script> 
$(document).ready(function() { 

function loop() { 
    $('#clouds').css({right:0}); 
    $('#clouds').animate ({ 
     right: '+=1400', 
    }, 5000, 'linear', function() { 
     loop(); 
     }); 
    } 

    loop(); 
    }); 

    </script> 
</div> 

</body> 


</html> 




#clouds { 
position:absolute; 
z-index:500; 
right:0px; 
top:10px; 
} 


#clouds2{ 

position:absolute; 
z-index:500; 
right:0px; 
bottom:10px; 



} 

を見ることができるようにHTMLコードがあると、あなたが を見ることができるようにこれは、CSSです私は誰も私が本当に失われていることを理解してくれればそれは本当に多くを意味する...また、私はあなたを台無しにどこに私を教えることができますあなたはそれが気に入ったら、コードを変更する必要はありません、ありがとう !

答えて

0

スクリプトタグの2番目の部分にcloud2の動き/アニメーションを指定する必要があります。あなたが$('#clouds')の代わりに$( '#clouds2を与えたあなたはまだ代わりに

$( '#のclouds2')

+1

、SO MUCH ITが働いて私の部分にそのようなDUMB間違いをありがとうございます! – PepiLepi

1

最初のエラーの

$( '#雲')

を使用しています')、関数がうまくいくと、divがうまく調整されても画像はまだ残っているので、imgタグにfloat:leftを追加しました。

$(document).ready(function() { 
 
    function loop() { 
 
    $('#clouds2').css('right', 0); 
 
    $('#clouds2').animate({ 
 
     right: '+=1400', 
 
    }, 5000, 'linear', function() { 
 
     loop(); 
 
    }); 
 
    } 
 

 
    loop(); 
 

 
});
#clouds { 
 
    position: absolute; 
 
    z-index: 500; 
 
    right: 0px; 
 
    top: 10px; 
 
} 
 

 
#clouds2 { 
 
    position: absolute; 
 
    z-index: 500; 
 
    left: 0px; 
 
    bottom: 10px; 
 
} 
 

 
#clouds2>img { 
 
    float: right; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="clouds2"> 
 
    <img border="0" alt="animated clouds" src="http://lorempixel.com/400/200/"> 
 
</div>

関連する問題