Question

我需要在文章的简短描述和完整描述之间切换。其实我有这个标记

<div class="post-content">
<p class="corta">Antonio Colombo Contemporary Art and Atelier Biagetti, have the honour to present&nbsp;a</p>
<span class="points" >...</span>
<br />
<span style="display:none" class="completa">Here i have the full description
</span>
<a style="width:auto;" class="link readLess" href="#">read more</a>
</div>

和这个js

$('div.post-content').delegate("a", "click", function(e) {
    e.preventDefault();
    var div = $(this).closest('div');
    var points = div.find('.points');
    var complete = div.find('.completa').html();
    var corta = div.find('.corta').html();
    div.find('.corta').html(complete);
    div.find('.completa').html(corta);
    var $this = $(this);
    if ($this.hasClass('readMore')) {
        $this.text("read less");
        $this.addClass('readLess').removeClass('readMore');
        points.show();
    } else {
        $this.text("read more");
        $this.addClass('readMore').removeClass('readLess');
        points.hide();
    }

});

这样可以正常工作，但是id在短描述和长描述之间平滑过渡。你会建议什么？我可以更改标记或使用jQuery插件（如果已知）

在此处http://jsfiddle.net/ycdBH/

Answer 1

使用jQuery UI函数switchClass，您可以设置两个类之间切换的动画

参考：http://jqueryui.com/docs/switchClass/

Answer 2

我修好了。看看http://jsfiddle.net/ycdBH/9/

Answer 3

.show('slow')
.hide('slow')

你可以使用持续时间而不是慢。

如何在显示/隐藏文本时进行平滑过渡

3 个答案: