Hi,

leider zähle ich noch zu den Anfängern im Bereich Javascript.

ich habe versucht mittels 3 Buttons 3 Divs in einen Rahmen anzeigen zu lassen.

http://www.kcserver.info/testscripte...0Slide%20.html

Es soll beim mouseover der buttons das jewielige Div angezeigt werden. Leider schaut der wechsel nicht schön aus da ein anderes div auch jeweils angezeigt wird.

In den Divs kommen dann Links. wenn man nicht innerhalb von 3 Sekunden über den div Container oder den Button ist soll es mittels fadeOut ausgeblendet werden. Leider weiß ich nicht wie ich das umsetzen soll.

HTML-Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
* {
	margin: 0;
}
#knopf {
	width: 40px;
	height: 30px;
	color: rgba(255,255,255,1.00);
	background-color: rgba(81,81,81,1.00);
	position: relative;
	left: 200px;
	text-align: center;
	padding-top: 4px;
	font-size: 14px;
	cursor: pointer;
}
.box_blue {
	width: 100%;
	height: 100px;
	background-color: rgba(81,81,81,1.00);
}
/*Slider*/
#wrapper {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}
#slider {
	width: 600px;
	height: 350px;
	background-color: rgba(227,227,227,0.52);
	border: 1px solid rgba(53,53,53,1.00);
	position: relative;
	float: left;

}
.rechts {
	width: 300px;
	height: 350px;
	float: left;
	position: relative;
	margin-left: 20px;
	margin-top: 4px;
	margin-bottom: 4px;
}
#r1 {
	width: 200px;
	height: 50px;
	background-color: rgba(139,212,20,1.00);
	margin-top: 4px;
	margin-bottom: 2px;
}
#r2 {
	width: 200px;
	height: 50px;
	background-color: rgba(19,149,212,1.00);
	margin-top: 2px;
	margin-bottom: 2px;
}
#r3 {
	width: 200px;
	height: 50px;
	background-color: rgba(212,149,19,1.00);
	margin-top: 2px;
	margin-bottom: 2px;
}
#fadeInBox1 {
	width: 200px;
	height: 350px;
	background-color: rgba(139,212,20,1.00);
	position: relative;
	left: 400px;
}
#fadeInBox2 {
	width: 200px;
	height: 350px;
	background-color: rgba(19,149,212,1.00);
	position: relative;
	left: 400px;
}
#fadeInBox3 {
	width: 200px;
	height: 350px;
	background-color: rgba(212,149,19,1.00);
	position: relative;
	left: 400px;
}
/**/
.box {
    display: none;
}
</style>
</head>

<body>
<div class="box_blue" id="slideToggleBox" style="display: none;">slideToggleBox</div>
<div id="knopf">+</div>
<div id="wrapper">
  <div id="slider">
    <div class="box" id="fadeInBox1" style="display: none;"></div>
    <div class="box" id="fadeInBox2" style="display: none;"></div>
    <div class="box" id="fadeInBox3" style="display: none;"></div>
  </div>
  <div class="rechts">
    <div class="showSingle" id="r1" target="1"></div>
    <div class="showSingle" id="r2" target="2"></div>
    <div class="showSingle" id="r3" target="3"></div>
  </div>

</div>

<!--Scripte--> 

<!--Top slider--> 
<script>$("#knopf").click(function () {$("#slideToggleBox").slideToggle("slow");});</script> 
<!--r1--> 

<script>
jQuery(function () {
    jQuery('.showSingle').hover(function () {
        var index = $(this).index(),
            newTarget = jQuery('.box').eq(index).slideDown();
        jQuery('.box').not(newTarget).hide("fast");

    });
	
});

$(".showSingle").mouseleave (function () {$(".box").hide("slow");});

</script>

</body>
</html>