我有一些代码可以整合到一个网站中并让它位于屏幕中间。这段代码用Javascript做了一些淡化。但我不能像我想的那样在屏幕上移动它。当我移动它时会弄乱动画。
这是HTML
<!DOCTYPE html>
使用JavaScript for（）循环的jQuery淡入淡出
<div id="elem0" class="toBeFaded">Here's the first message...</div>
<div id="elem1" class="toBeFaded">We have second one here...</div>
<div id="elem2" class="toBeFaded">And here's the third message...</div>
<div id="elem3" class="toBeFaded">OMG!!! Here's the fourth message!</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/fadeCode.js" defer="defer"></script>
Javascript
$（function（）{
var yourFade = 1, // the amount of time in seconds that the elements will fade in AND fade out yourDelay = 2, // the amount of time in seconds that there will be a delay between the fade ins and fade outs fadeTime = yourFade * 1000, //convert fade seconds to milliseconds (1000) delayTime = yourDelay * 1000, // convert delay seconds to milliseconds (2000) totalTime = fadeTime + delayTime, //3000 milliseconds...needed for all those delays we talked about allElems, // find out exactly how many page elements have the 'toBeFaded' class (4) elemNoFade, // Will help us find the last element represent the last element (3) i, fadingElem; for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i+=1) { fadingElem = "#elem" + i; if (i === 0) { $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime); } else if (i === elemNoFade) { $(fadingElem).delay(totalTime * i).fadeIn(fadeTime); } else { $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime); } } });
和CSS
.toBeFaded {
display: none;
position:absolute;
font-size:70pt;
}
和link到jsfiddle