Fade DIV Automatisch
Fade DIV Automatisch mit einer wenig jquery! Zuerst habe ich die Struktur für html aufgebaut danach css und js!
<div id=”content”>
<div id=”fade1″>Content 1</div>
<div id=”fade2″>Content 2</div>
<div id=”fade3″>Content 3</div>
<div id=”fade4″>Content 4</div>
<div id=”fade5″>Content 5</div>
</div>
Dies ist der CSS Bereich den ich dafür angelegt habe!
#container {
width: 225px;
height: 120px;
overflow: hidden;
position: relative;
}
#fade1 {
width: 225px;
z-index: 2;
position: absolute;
left: 0px;
top: 0px;
}
#fade2 {
width: 225px;
z-index: 3;
position: absolute;
left: 0px;
top: 0px;}
#fade3 {
width: 225px;
z-index: 4;
position: absolute;
left: 0px;
top: 0px;}
#fade4 {
width: 225px;
z-index: 5;
position: absolute;
left: 0px;
top: 0px;}
#fade5 {
width: 225px;
z-index: 6;
position: absolute;
left: 0px;
top: 0px;}
Und hier noch ein wenig Js!
var over;
function fadeEngine(x) {
var total_divs=5;
var y=x;
if ( !over ) {
if(x==total_divs) y=1; else y++;
$(“#fade”+x).fadeOut(2500);
$(“#fade1″+x).css(“display”,”none”);
$(“#fade”+y).fadeIn(2500);
}
setTimeout(‘fadeEngine(‘+y+’)',4000);
}
fadeEngine(0);
$(document).ready(function(){
$(“#container”).hover(
function () { over = this.id; },
function () { over = false; } );
});
Damit kann man 5 DIV Elemente faden – das ganze Beginnt automatisch! Im File muss man im Header natürlich noch die JQUERY Files einbinden! Am besten damit:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Danke das Sie diesen Artikel gelesen haben. Sie können nun eine Nachricht hinterlassen oder bestellen den RSS Feed.
Comments
No comments yet.
Leave a comment