我正在尝试让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();
});
答案 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以在移动设备和桌面设备上运行