jQuery funktioniert nicht auf Overlay?

-1

Ich habe ein seltsames Problem, das ich noch nie zuvor erlebt habe. Ich habe jQuery korrekt geladen, aber ich kann es nicht tun, etwas zu tun.jQuery funktioniert nicht auf Overlay?

Ich versuche, jQuery zu verwenden, um eine Reihe von Textelementen auf dem ursprünglichen Wrapper meiner Sites schnell einzublenden. Mein JavaScript funktioniert auf der Hauptseite, daher denke ich, dass es ein Problem mit meinem CSS ist?

Codebeispiel:

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript" src="effects.js"></script> 
<script type="text/javascript" src="main.js"></script> 
</head>

Das Overlay in Frage ...

<body> 
<div id="wrapper"> 
<div id="overlay"> 
    <h1 id="overlaytext1">Fade this in</h1> 
    <h1 id="overlaytext2">Then this</h1> 
    <h1 id="overlaytext3">then this</h1> 
    <h1 id="overlaytext4">then this.</h1> 
    <div id="overlaycontent"> 
    <h1>Compelling paragraph.</h1> 
    <h1 id="overlaytext">Credit</h1> 
    </div> 
</div> 
<-- Main Page Content --> 
</div> 
</body>

Meine CSS

#overlay { 
    background-color: rgba(0,0,0,0.90); 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    z-index:1; 
} 

#overlaycontent { 
    padding-top: 20%; 
    width: 50%; 
    color: #ffffff; 
    margin: auto; 
    text-align: center; 
    font-size: 26px; 
    letter-spacing: -1px; 
} 

#overlaytext { 
    margin-top: 20px; 
    font-size: 22px; 
} 

#overlaytext1 { 
    display: none; 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    margin-left: 5%; 
    margin-top: 5%; 
} 

#overlaytext2 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    right: 5%; 
    bottom: 5%; 
} 

#overlaytext3 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    margin-top: 10%; 
    margin-left: 1%; 
} 

#overlaytext4 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    right: 1%; 
    bottom: 15%; 
}

Inhalt von effects.js

$(function() { 
    setTimeout(function() { 
    $('#overlaytext1').show(); 
    }, 1000); 
}};

Für mich sieht alles gut aus. Das einzige, was mir einfällt, ist etwas, bei dem der Z-Index oder die Position ein Problem verursacht?

Irgendwelche Gedanken?

Quelle

2016-05-14 Nick Tirrell

Wie können wir Wirkung und main.js bekommen? –

Hier ist eine Geige mit CSS-Klasse Overlay Text und JavaScript zu verbergen es 1 Sekunde nach einander zeigen: https://jsfiddle.net/stevenng/0n52dajm/1/

CSS:

.hide { 
    display: none; 
} 

#overlay { 
    background-color: rgba(0,0,0,0.90); 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    z-index:1; 
} 

#overlaycontent { 
    padding-top: 20%; 
    width: 50%; 
    color: #ffffff; 
    margin: auto; 
    text-align: center; 
    font-size: 26px; 
    letter-spacing: -1px; 
} 

#overlaytext { 
    margin-top: 20px; 
    font-size: 22px; 
} 

#overlaytext1 { 
    display: none; 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    margin-left: 5%; 
    margin-top: 5%; 
} 

#overlaytext2 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    right: 5%; 
    bottom: 5%; 
} 

#overlaytext3 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    margin-top: 10%; 
    margin-left: 1%; 
} 

#overlaytext4 { 
    position: fixed; 
    color: rgba(255,255,255,0.20); 
    font-family: 'Kaushan Script', cursive; 
    font-size: 40px; 
    right: 1%; 
    bottom: 15%; 
}

HTML:

<div id="wrapper"> 
<div id="overlay"> 
    <h1 id="overlaytext1" class="hide">Fade this in</h1> 
    <h1 id="overlaytext2" class="hide">Then this</h1> 
    <h1 id="overlaytext3" class="hide">then this</h1> 
    <h1 id="overlaytext4" class="hide">then this.</h1> 
    <div id="overlaycontent"> 
    <h1>Compelling paragraph.</h1> 
    <h1 id="overlaytext">Credit</h1> 
    </div> 
</div> 
</div>

JS :

$(function(){ 
    setTimeout(function(){ $('#overlaytext1').fadeIn('slow'); }, 1000); 
    setTimeout(function(){ $('#overlaytext2').fadeIn('slow'); }, 2000); 
    setTimeout(function(){ $('#overlaytext3').fadeIn('slow'); }, 3000); 
});

Quelle

2016-05-14 06:41:58 Steve

Habe es zur Arbeit gebracht. Wenige Kommentare. Du vermisst ein "!" an:

</div> 
<-- Main Page Content --> 
</div>

Sie müssen auch die korrekte Syntax für die setTimeout-Funktion angeben:

var timeOut = window.setTimeout(function() { 
    $('#overlaytext1').show(); 
}, 1000);

oder:

$(function() { 
    setTimeout(function() { 
    $('#overlaytext1').show(); 
    }, 1000); 
});

(Sie die Klammer fehlten - Sie hatten eine Klammer)

Arbeitsgeige unter: https://jsfiddle.net/dhqdt3vk/

Quelle

2016-05-14 06:50:41

jQuery funktioniert nicht auf Overlay?

Antwort

Verwandte Themen