Daher wird zuerst #metext_hiddentext ausgeblendet, bis Sie #btn_more_metext drücken, und dann wird height: 50% von height: auto <überschrieben / stark>.

Jquery:

<script type="text/javascript">
    $( document ).ready(function() {
        $('#metext_hiddentext').hide();
        $('#btn_more_metext').click(function(){
            $('#me').css( "height", "auto" );
            $('#metext_hiddentext').slideToggle('slow');
        });
    });
</script>

Html:

<div id="me">
    <div id="me_content">
     <div id="meimg"></div>
     <div class="metext">
      <h1>I'm Lazor Zombie</h1>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <div id="metext_hiddentext">
      <h2>Lorem ipsum dolor sit amet.</h2>
     </div>
     <div id="btn_more_metext">...</div>
    </div>
</div>

CSS:

#me {
    background: #ff8400;
    height: 50%;
}


#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}
4
Jaakko Uusitalo 6 Dez. 2013 im 14:17

3 Antworten

Beste Antwort

Geben Sie padding:0 und margin:0 an oder fügen Sie <h2> benutzerdefinierten Rand und Abstand hinzu, da diese Standardränder haben und dies zu einem Sprungverhalten in Ihrem slideToggle() führt.

h2{
   margin:0;
   padding:0;
}

Hier ist die Demo mit dem Tag <h2> mit benutzerdefiniertem Rand und Abstand

3
Dhaval Marthak 6 Dez. 2013 im 10:25

Ich denke, das Problem hier ist, dass wenn div animiert ist, es overflow:hidden; hat Und der h2 hat einen gewissen Spielraum ... Versuchen Sie also, den Rand von h2 zu entfernen und ihn dem Div hinzuzufügen, der toggeld ist:

Hier die Geige: http://jsfiddle.net/qk8nq/

#me {
    background: #ff8400;
    height: 50%;
}
#metext_hiddentext {
    margin:1em 0;
}

#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}
h2 {
    padding:0;
    margin:0;
}
2
reyaner 6 Dez. 2013 im 10:25

Manchmal kann dies behoben werden, indem dem Container position: relative hinzugefügt wird (in diesem Fall der mit der Klasse "Metext"). Aber ich habe keine Ahnung warum.

1
David Ball 4 Jän. 2018 im 09:29