Das ganze geht mit Jquery 10 mal einfacher, habe es dir schnell geschrieben.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$( "#button" ).click(function() {
$( ".ClassRed" ).fadeIn("slow", function(){
$( "#buttonOut" ).click(function() {
$( ".ClassRed" ).fadeOut("slow");
});
});
});
});
</script>
<style>
#button
{
width: 120px;
height: 30px;
background: white;
line-height: 30px;
font-family: Arial;
font-size: 11px;
text-align: center;
border: 1px solid rgba(0,0,0,0.2);
cursor: pointer;
}
.classRed
{
width: 150px;
height: 150px;
background: red;
display: none;
margin-top: 5px;
}
#buttonOut
{
width: 120px;
height: 30px;
background: white;
line-height: 30px;
font-family: Arial;
font-size: 11px;
text-align: center;
border: 1px solid rgba(0,0,0,0.2);
cursor: pointer;
margin-top: 5px;
}
</style>
<div id="button">ClassRed einblenden</div>
<div id="buttonOut">ClassRed ausblenden</div>
<div class="classRed"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$("#button").click(function(){
if($("#button").html() == "Einblenden"){
$(".ClassRed").fadeIn("slow", function(){
$("#button").text("Ausblenden");
});
}else{
$(".ClassRed").fadeOut("slow", function(){
$("#button").text("Einblenden");
});
}
});
});
</script>
<style>
#button
{
width: 120px;
height: 30px;
background: white;
line-height: 30px;
font-family: Arial;
font-size: 11px;
text-align: center;
border: 1px solid rgba(0,0,0,0.2);
cursor: pointer;
}
.classRed
{
width: 150px;
height: 150px;
background: red;
display: none;
margin-top: 5px;
}
</style>
<div id="button">Einblenden</div>
<div class="classRed"></div>Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!