Question

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

注意如何加载注释，向下滑动。当你点击'隐藏'时也是如此。

Answer 1

它叫做 slideDown() 。

分两步完成：

首先，评论的容器被滑动（因此它会将内容推下来）。
然后评论自己在这个容器中向下滑动。

但您可能必须使用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吐出数据。您可以根据需要对其进行编程，

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

3 个答案: