0

我有这个

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

在jsfiddle正如你所看到的，当你开始滚动时，文本动画（我确实从 Stackoverflow 得到这个，但丢失了链接，所以感谢为第一篇文章做出贡献的人）我想要的是文本当内容再次到达顶部时，动画回到其原始状态。

任何帮助总是非常感谢

亲切的问候

4

1 回答 1

0

您需要什么样的浏览器支持？动画返回的关键是您需要知道原始样式。

我能想到的一种方法是使用 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/

于 2013-11-06T20:50:36.317 回答