My form div contains multiple inner divs:
<div class="form" style="display:none">
For example:
<div class="row">
<?php echo $form->labelEx($model,'comment'); ?>
<?php echo $form->textField($model,'comment',array('size'=>60,'maxlength'=>140)); ?>
<?php echo $form->error($model,'comment'); ?>
</div>
I want to smoothly slide down all the div elements at once.
Currently, I am using the following code:
$(".form").slideDown(2000);
However, this results in a choppy animation as each div slides individually. How can I make it so that they all slide down together seamlessly?
The complete form structure is shown below:
<div class="form" style="">
<form id="comment-form" method="post" action="/post/index.php/comment/create>
<p class="note">
Fields with
<span class="required">*</span>
are required.
</p>
<div id="comment-form_es_" class="errorSummary" style="display:none">
<p>Please fix the following input errors:</p>
<ul>
</div>
<div class="row">
<label class="required" for="comment_comment">
Comment
<span class="required">*</span>
</label>
<input id="comment_comment" type="text" name="comment[comment]" maxlength="140" size="60">
<div id="comment_comment_em_" class="errorMessage" style="display:none"></div>
</div>
<div class="row">
<label class="required" for="comment_type_id">
Type
<span class="required">*</span>
</label>
<input id="comment_type_id" type="text" name="comment[type_id]">
<div id="comment_type_id_em_" class="errorMessage" style="display:none"></div>
</div>
<div class="row buttons">
<p>
<input type="submit" value="Create" name="yt0">
</div>
</form>
</div>
Your assistance is greatly appreciated. Thank you.