CSS3 Складная панель

Question

Я экспериментировал с новыми методами CSS3 анимации webkit. Я сделал складную панель, которая должна работать, но при этом странно прыгать и быть статичной.

CSS

.reveiws .content {
    font-size:12px;
    line-height:18px;
    height:72px;
    overflow:hidden;
    float:left;
    vertical-align:top;
    max-width:560px;
    -webkit-transition: height 800ms;
    -moz-transition: height 800ms;
}
.reveiws .contentfull {
    height:100%;
    -webkit-transition: height 800ms;
    -moz-transition: height 800ms;
}

HTML

<div id="pan<?php the_ID();?>" class="content"><?php the_content();?></div>

    <div class="author" style="text-align:left; padding-right:10px;">

    <a href="#" onclick="$('#pan<?php the_ID();?>').addClass('contentfull'); $(this).hide(); $(this).next().show(); return false">Read More &raquo;</a>
    <a href="#" onclick="$('#pan<?php the_ID();?>').removeClass('contentfull'); $('#pan<?php the_ID();?>').addClass('content'); $(this).hide(); $(this).prev().show(); return false" style="display:none;">&laquo; Close panel</a>

Вот НЕКРАЗНАЯ http://jsfiddle.net/L6Jwa/1/

Answer 1

Я думаю, что ваша проблема в том, что у вас рост 72 пикселя в одном классе и 100% в другом. Изменить, например, на 400px во втором классе и работает нормально.

Я не уверен, что вы можете использовать% unit в такой ситуации.

K