0

我需要你的帮助。我正在尝试为单击事件添加一些动画。我可以很容易地使用切换，但我的问题是，我有 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/

新更新

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

$('.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();
        });
    });
});

这是最后一个代码的小提琴。

谁能帮我改进这段代码？非常感谢。

4

1 回答 1

0

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

小提琴：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>
于 2013-10-07T12:10:29.573 回答