Edit in JSFiddle

<div id="ipad">
    <div id="button"></div>
    <div id="screen"></div>
</div>
<div id="blatt-gesamt">
    <!-- Das Blatt ist 4-geteilt damit nur der richtige Teil durchscheint
    -->
    <div id="blatt-oben" class="blatt-teil"></div>
    <div id="blatt-links" class="blatt-teil"></div>
    <div id="blatt-rechts" class="blatt-teil"></div> <!-- Nur dieser Teil hat später Transparenz -->
    <div id="blatt-unten" class="blatt-teil"></div>
</div>
<div id="button-container">
    <input type="button" id="startButton" value="Enter the sheet" onclick="startAnimation()"></input>
    <input type="button" id="endButton" value="Remove the sheet" onclick="endAnimation()"
    disabled="disabled"></input>
</div>

function startAnimation() {
    $('#startButton').attr('disabled', 'disabled');
    $('#blatt-gesamt').show();
    $('#blatt-gesamt').animate({
        opacity: 1,
        left: "+=90"
    }, 2000, function () {
        $('#endButton').removeAttr('disabled');
    });
    //
    $('#blatt-links').animate({
        width: "25%"
    }, 2000);
    $('#blatt-rechts').animate({
        width: "75%"
    }, 2000);
}

function endAnimation() {
    $('#endButton').attr('disabled', 'disabled');
    $('#blatt-gesamt').animate({
        opacity: 0,
        left: "-=90"
    }, 2000, function () {
        $('#startButton').removeAttr('disabled');
        $('#blatt-gesamt').hide();
    });
    $('#blatt-links').animate({
        width: "75%"
    }, 2000);
    $('#blatt-rechts').animate({
        width: "25%"
    }, 2000);

}

body {
    background-color:#aaa;
}
#button-container {
    position:relative;
    width:300px;
    top: 300px;
    margin-left:auto;
    margin-right:auto;
}
#ipad {
    position:absolute;
    width:300px;
    height:200px;
    top:50px;
    left:100px;
    border-radius:10px;
    background-color:#000;
}
#button {
    position:relative;
    top: 50%;
    left:10px;
    width:20px;
    height:20px;
    margin-top:-10px;
    background:#fff;
    border-radius:10px;
}
#screen {
    position:relative;
    top:20px;
    left:40px;
    width:240px;
    height:160px;
    margin-top: -10px;
    background:#f00;
}
#blatt-gesamt {
    position:absolute;
    display:none;
    width:160px;
    height:240px;
    top:30px;
    left:10px;
    opacity:0;
    overflow:hidden;
    z-index:2;
}
.blatt-teil {
    position:relative;
    float:left;
    background-color:#fff;
}
#blatt-oben {
    width:100%;
    height:40px;
}
#blatt-unten {
    width:100%;
    height:40px;
}
#blatt-links {
    height:160px;
    width:75%;
}
#blatt-rechts {
    height:160px;
    width:25%;
    opacity:0.9;
}