Question

我有这个

$(document).ready(function(){
$(window).scroll(function(){
   if($("#1").offset().top < $(window).scrollTop());
    $("#1").animate({"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fixed"}, 1000);
}, function() {
$("#1").animate({"color":"#333","font-size":"52pt", "top":"0", "position":"fixed"}, 1000);
  });
});

<{3>} jsfiddle正如你所看到的，当你开始滚动时，文本动画（我确实从Stackoverflow获得了这个，但丢失了链接，所以感谢那些为第一篇文章做出贡献的人）我是什么当内容再次到达顶部时，我希望文本能够动画回原始状态。

总是非常感谢任何帮助

亲切的问候

Answer 1

您需要什么样的浏览器支持？动画背后的捕捉是你需要知道原始风格。

一旦我能想到的方法是使用window.getComputedStyle方法来检索元素的样式并将它们存储在一个对象数组中以用于动画背面。您将需要一些额外的支持功能。

我在Chrome，IE 9和FireFox 24中测试了以下代码，它看起来效果很好。这一切都取决于你使用的样式。但是，由于你是动画，这应该适用于大多数人。

另外，我将样式和速度存储在变量中以使其更清晰。小提琴下面：

$(document).ready(function(){
    var aniCss = {"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fixed"};
    var speed = 1000;
    var props = getProps(aniCss);
    var curCss = getStyles($("#1"), props);
    $(window).scroll(function(){
        if ($(window).scrollTop() >0) {
            $("#1").animate(aniCss,speed);
        }
        else {
            $("#1").stop(true,true).animate(curCss,speed);
        }
    });

    function getProps(css) {
        var props = [];
        for (k in css) {
            props.push(k);
        }
        return props;
    }
    function getStyles($ele, props) {
        var compCss = getComputedStyle($ele[0]);
        var styles = {};
        for (var i = 0;i<props.length;i++) {
            var name = props[i];
            var prop = compCss.getPropertyValue(name);
            if (prop != '') { styles[name]=prop;}
        }
        return styles;
    }
});

小提琴：http://jsfiddle.net/ajqQL/1/

更新：刚刚在jQuery 1.9中看到它们添加了传递属性数组以检索值的功能。您可以通过使用jQuery .css（）方法简化上述内容：

$(document).ready(function(){
    var aniCss = {"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fixed"};
    var speed = 400;
    var props = getProps(aniCss);
    var curCss = $('#1').css(props);
    $(window).scroll(function(){
        if ($(window).scrollTop() >0) {
            $("#1").animate(aniCss,speed);
        }
        else {
            $("#1").stop(true,true).animate(curCss,speed);
        }
    });

    function getProps(css) {
        var props = [];
        for (k in css) {
            props.push(k);
        }
        return props;
    }
});

小提琴：http://jsfiddle.net/NZq8D/1/

滚动时jQuery动画div

1 个答案: