Fade-in Spoiler Revealer

jQuery bietet einige wirklich einfache integrierte Funktionen zum „Ein- und Ausblenden“ verschiedener Seitenelemente. Ich dachte, wir könnten einige dieser Funktionen für einen wirklich einfachen **Spoiler Revealer** nutzen.

Demo anzeigen   Dateien herunterladen

Mit etwas cleverem CSS und jQuery können wir unseren Markup wirklich sauber halten. Schauen Sie sich die Verwendung hier an.

<p>In the movie Citizen Kane, Charles Foster Kane's last word "Rosebud" 
turns out to <span class="spoiler">be a sled.</span></p>

Das stimmt, nur „Spoiler“ in einem Span mit der Klasse „spoiler“. Das jQuery findet und versteckt all diesen Text und ersetzt ihn durch einen Button „Spoiler anzeigen“. Beim Klicken auf diesen Button verschwindet der Button und wird durch den Text aus dem Span ersetzt. Schauen Sie sich den Code an.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
	
	$("span.spoiler").hide();
	
	 $('<a class="reveal">Reveal Spoiler &gt;&gt;</a> ').insertBefore('.spoiler');

	$("a.reveal").click(function(){
		$(this).parents("p").children("span.spoiler").fadeIn(2500);
		$(this).parents("p").children("a.reveal").fadeOut(600);
	});

}); 
</script>

Super einfach. Nur ein kurzes kleines Beispiel, um zu zeigen, wie schön und einfach es ist, mit jQuery zu arbeiten und wie es das ergänzen und erweitern kann, was Sie bereits mit CSS tun!