0

Webサイトに統合して、画面の中央に配置したいコードがいくつかあります。このコードは、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>

</ p>

Javascript

$（関数（）{

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;

} </ p>

とjsfiddleへのリンク

4

1 に答える 1

2

問題が発生するかどうかはわかりません。このフィドルを見てください：http：//jsfiddle.net/joplomacedo/6xfKN/375/

于 2012-07-13T00:36:58.343 に答える