jQuery动画滚动到某一点

时间:2014-02-12 09:40:36

标签: javascript jquery html css

我正在尝试在滚动时平滑地减少元素顶部填充。同时我希望2个子元素褪色,其中1个元素和1个元素。我已经褪色了,但我不能让填充顶部正常工作。任何人都可以看到我的功能可能有什么问题吗?

$(window).scroll(function () { 
    $('.transitionParent').css({
        'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/pXdhB/1/


我也尝试过(没有运气!)

var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));

3 个答案:

答案 0 :(得分:2)

这样的东西?

DEMO http://jsfiddle.net/pXdhB/7/

JQUERY

$(window).scroll(function () {
    $('.transitionParent').stop().animate({
        'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
    }, 1000, function () {
        // Animation complete.
    });
    $('.ipadOutline').css({
        'opacity': 1 - ($(this).scrollTop() / 500)
    });
    $('.ipadPhoto').css({
        'opacity': 0 + ($(this).scrollTop() / 500)
    });
});

答案 1 :(得分:1)

喜欢这个吗?

   $(window).scroll(function () { 
            $('.transitionParent').css({
                'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
            });
            $('.ipadOutline').css({
                'opacity' : 1-($(this).scrollTop()/500)
            });
            $('.ipadPhoto').css({
                'opacity' : 0+($(this).scrollTop()/500)
            });
        });

http://jsfiddle.net/DkM8a/

答案 2 :(得分:0)

试试这个。以下是相关代码:

var st = $(this).scrollTop(),
    newPt = 100 - st;

console.log(st + " " + newPt)
if (newPt > 0) {
    $('.transitionParent').css({
        'padding-top' : newPt
    })
}

演示:http://jsfiddle.net/pXdhB/8/