jQuery有这样的效果吗？ 这是使用原型

Question

http://blog.posterous.com/单击评论链接。

注意注释是如何加载的，有点下滑。 同样，当您单击“隐藏”时。

Answer 1

它称为slideDown() 。

分两个步骤完成：

1. 首先，滑动注释容器（以便将内容推下）。
2. 然后，注释本身在此容器中滑落。

但是您可能必须使用jQuery提供的ajax函数来加载评论。

Answer 2

看起来或多或少像

• 单击评论时，先执行ajax调用，然后再执行slideDown() （可能需要少量的放松）

• 单击隐藏时还有一个slideUp()

除非我想念什么？

Answer 3

xhr.html：

<style>
    div.comments { display:none; }
</style>

    <div class="comment-wrap">
    <a href="#" class="comments" rel="300">comments</a>
    <div class="comments"></div>
    </div>

    <div class="comment-wrap">
    <a href="#" class="comments" rel="301">comments</a>
    <div class="comments"></div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function() {
    $('a.comments').each(function() {
    var el = this;
    $(this).toggle(function(e){
        e.preventDefault()
        $.ajax({
        url:'content.php',
        data:{id:$(el).attr('rel')},
        type:'GET',
        success:function(html) {
            $(el).next().html( html ).slideDown('slow');
        }
        });
    }, function(e) {
        $(el).next().slideUp('slow');
    });
    });
});
</script>

content.php（模仿获取数据库结果）：

<?php
    $id = (int)$_GET['id'];

    switch ( $id ) {
    case '300':
        $content = '
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        ';
    break;

    case '301':
        $content = '
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        lorem ipsum dolor sit amet<br>
        ';
    break;

    default:break;
    }
    echo $content;
?>

并且只需确保content.php吐出数据即可。 您可以根据需要对其进行编程，