javascript - 在淡入淡出之前滑动一个 div

Question

目前在一个主要使用 php 的网站上工作，我对 javascript jquery 真的知之甚少。我确实有一些东西在工作，我按下一个按钮，然后淡入一个div。但是它突然移动了它下面的div..有没有办法让我可以在淡入之前将div滑动到它下面？这是我当前的代码..以及该页面的链接。单击发送消息开始淡入淡出。

http://www.mxbempire.com/?page=rider&riderid=17&id=1#

$(document).ready(function(){   
    $('#composemsg').hide();

    $('.msgdwn').click(function(){
        $('#composemsg').fadeToggle("slow");
    });

    $('.msgdwn').click(function(e){
        e.stopPropagation();
    });

});

和 div

<div class="lowerhalf">

    <div class="card2" id="composemsg">
        <div class="heading">Send Message to <?php echo $ridertag ?></div>
        <textarea name="message" id="compose"></textarea>
        <input type="submit" id="message" value="Send PM" />
    </div>
    </form>
    <div class="card2">
        <div class="heading">Wall Comments</div>

    </div>
    <div class="card2">
        <div class="heading">Screenshots</div>
    </div>
    <div class="card2">
        <div class="heading">Statistics</div>
    </div>
</div>

Answer 1

这可能就是您正在寻找的内容。

$(function(){

    $('.msgdwn').click(function(){
        $('#composemsg').slideDown(500, function(){
            $('#composemsg').animate({ opacity : 1 }, 1000);
        });
    });    

});

此外还有一些像这样的CSS:

.composemsg {
  display: none;
  opacity: 0;
}

请参阅此处的示例: http://jsfiddle.net/Cp6mx/