Question

我正在尝试构建一个函数，当用户点击我的网页上的“显示更多”时，div高度加倍（如果它最初为300px，现在变为600px）id就像这样反弹增加了。

如果再次点击id然后喜欢它变成900像素，那么点击窗口每次增加300像素......

// Set height of visible window
var window = 300;

// On click increase window size
$('.show-more').click(function(){

    $('.visible-window').css({
        height : window * 2
    })

});

Answer 1

你需要的是什么：

// Set height of visible window
var window = 300;

// On click increase window size
$('.show-more').click(function(e){
    // Prevent the default action of the link
    e.preventDefault();

    // Animate the height, add 300px each time and easeOutBounce (for the effect)   
    $('.visible-window').animate({
        height : '+=300' // Add 300px to the current height (whatever it is)
    }, 'slow', 'easeOutBounce');

});

检查这个JSfiddle：http://jsfiddle.net/dKMyg/2/（点击阅读更多，div高度扩展300px，并根据需要设置动画）

我还添加了资源jQuery Easing（here）。

Answer 2

您需要使用.animate代替.css，并且每次都将初始高度添加到当前高度。

// Set height of visible window
var visibleWindow = $('.visible-window');
var increase = visibleWindow.height();

// On click increase window size
$('.show-more').click(function(e){
    e.preventDefault();

    visibleWindow.animate({
        height : visibleWindow.height() + increase
    }, 1000);
});

http://jsfiddle.net/dKMyg/1/

我添加了e.preventDefault()来禁用链接的默认操作（每次都会移动页面）;你应该删除它，如果你不想要它。

Answer 3

如果您可以加入jQueryUI Effects core，则可以使用跳出缓动效果。有关其他示例，请参阅优秀的jQueryUI easing demo page。

此示例代码还使用.animate()更改单height个属性，该属性已被赋予相对值+=。来自文档：

动画属性也可以是相对的。如果一个值带有前导+ =或 - =字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

.animate()也可以提供easing功能和持续时间。我使用了1500毫秒和easeOutBounce效果。

// On click increase window size
$('.show-more').click(function(){
    $('.visible-window').animate({
        height: '+=100'
    }, 1500, 'easeOutBounce')
    return false // stop default click action
});

Demo（演示增加+ 100px）

Answer 4

//设置可见窗口的高度

var window = 300;

//点击增加窗口大小

$（ '显示-更多'）。点击（函数（）{

$('.visible-window').css({
    height :   $('.visible-window').height() + window
})

}）;

jQuery - 单击时，div的动画高度具有反弹效果

4 个答案: