1

我正在尝试构建一个功能，当用户在我的网页上单击“显示更多”时，div 的高度会加倍（如果最初是 300 像素，现在变成 600 像素）这样的 id 会随着增加而反弹。

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

http://jsfiddle.net/dKMyg/ 

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

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

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

});
4

4 回答 4

2

这是你需要的： 

// 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 高度扩展 300 像素，并按照您的意愿进行动画处理）

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

于 2013-05-17T08:56:19.357 回答
1

您需要使用.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()来禁用链接的默认操作（每次都向上移动页面）；如果你不想要它，你应该删除它。

于 2013-05-17T08:53:24.203 回答
0

// 设置可见窗口的高度

变量窗口 = 300;

// 点击时增加窗口大小

$('.show-more').click(function(){

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

});

于 2013-05-17T09:04:31.373 回答
0

如果您可以包含jQueryUI 效果核心，那么反弹缓动效果将可用。有关其他示例，请参阅出色的jQueryUI 缓动演示页面。

此示例代码还用于.animate()更改height已赋予相对值的单个属性+=。从文档中：

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

.animate()也可以提供缓动函数和持续时间。我用了1500毫秒和easeOutBounce效果。

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

演示（演示增加 100 像素）

于 2013-05-17T08:56:43.050 回答