Question

我需要你的帮助。我正在尝试为点击事件添加一些动画。我可以通过切换轻松实现这一点，但我的问题是，我有2个不同名称和样式的按钮，我需要在单击其他节目时单击隐藏按钮。这是我的代码，因此您可以更好地理解它：

我的标记只有2个链接：

<a href="#" class="show-more"><?php print t('Show more'); ?></a>
<a href="#" class="show-less"><?php print t('Show less'); ?></a>

任何人都可以帮我这个吗？我需要帮助这个使用动画（就像jQuery切换很好）和性能建议。提前谢谢。

更新

http://jsfiddle.net/jYnnc/

NEW UPDATE

我找到了一种方法来重现我需要的东西，这是代码：

$('.user-profile .resume p').each(function() {
    var $obj = $(this);
    var height = $obj.height();
    var maxHeight = 40;

    if (height > 40) {
        $obj.css('height', maxHeight).css('overflow', 'hidden');
        $obj.siblings('.show-more').show();
    }

    $obj.siblings('.show-more').click(function(e) {
        e.preventDefault();
        $obj.animate({
            'height' : height
        }, function() {
            $obj.siblings('.show-more').hide();
            $obj.siblings('.show-less').show();
        });
    });

    $obj.siblings('.show-less').click(function(e) {
        e.preventDefault();
        $obj.animate({
            'height' : maxHeight
        }, function() {
            $obj.siblings('.show-more').show();
            $obj.siblings('.show-less').hide();
        });
    });
});

这是最后一段代码的fiddle。

有人可以帮我改进这段代码吗？非常感谢。

Answer 1

如果您的问题是关于如何在点击第二个动画时显示一个，这可能是你的解决方案：

小提琴：http://jsfiddle.net/sky8V/

希望我帮助过：）

JS

$('.show-more').click(function(){
    $('.show-more').hide('slow', function(){
        $('.show-less').show('slow')
    });
});

$('.show-less').click(function(){
    $('.show-less').hide('slow', function(){
        $('.show-more').show('slow')
    });
});

CSS

.show-less { display: none; }

HTML

<a href="#" class="show-more">Show more</a>
<a href="#" class="show-less">Show less</a>

jQuery切换不同的链接

1 个答案: