Joachim: jQuery .css

Beitrag lesen

Hi,

Vielleicht wende ich die Transition ja nur falsch an, erklär mir bitte jemand was ich da noch groß verbessern könnte:

mein Vorschlag sähe so aus, jetzt mal bewusst ohne irgendwelche frameworks. Vorteil gegenüber "klassisch" imho: ich erspare mir die setTimeout-Animation bzw. die Berechnung der margins für jeden Durchlauf.

<!DOCTYPE html>
<html lang="de">
<head>

<title>Sixt</title>  

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="JW">
<meta name="description" content="Sixt">
<meta name="keywords" content="Sixt">

<style type="text/css">

body {
        font: normal normal normal 12px verdana, arial, helvetica, sans-serif;
    }

* {
        padding: 0;
        margin: 0;
    }

#main {
        padding: 20px;
    }

#foo {
        overflow: hidden;
    }

#foo p {
        margin: -9999px 0 0 0;
        padding: 10px 0 10px 0;
    }

#foo .foop {
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -ms-transition: all 0.4s;
        -o-transition: all 0.4s;

-moz-transition-timing-function: ease-out;
        -webkit-transition-timing-function: ease-out;
        -ms-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
    }

#foo.open p {
        margin-top: 0 !important;
    }

</style>

<script type="text/javascript">
    window.addEventListener("load", init_trans, false);
    /**
     * calculate p's hight and set
     * top-marin depending on height
     * now set css-class containing transition
     * *      to av-id top margin causes animation
     */
    function init_trans(e) {
        var foop                =  document.getElementById("foo").getElementsByTagName("p")[0]
        foop.style.marginTop    =  (foop.offsetHeight * -1) + "px";
        foop.className          =  "foop";
    }
    /**
     * toggle class name
     * @return {bool} false
     */
    function toggle() {
        var el          =  document.getElementById("foo");
        el.className    =  (el.className == "open")? "collapsed" : "open";
        return false;
    }
</script>

</head>
<body>
    <div id="main">
        <a href="#foo" onclick="return toggle()">Mach mal auf...</a>
        <div id="foo">
            <p>
                foo<br />
                foo<br />
                foo<br />
                foo<br />
                bar<br />
                foo<br />
                foo<br />
                foo<br />
                foo<br />
                foo<br />
                foo<br />
                foo<br />
                batz<br />
                foo<br />
                foo<br />
                lala<br />
            </p>
        </div>
    </div>
</body>
</html>

Gruesse, Joachim

--
Am Ende wird alles gut.