JQuery анимированный ДИВ на свитке

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

в jsfiddle Как вы можете видеть, когда вы начинаете прокручивать, текст оживляет (я получил это от Stackoverflow, но потерял ссылку, так что спасибо люди, которые внесли свой вклад в первый пост). Я бы хотел, чтобы текст возвращался в исходное состояние, когда содержимое снова достигает вершины.

Любая помощь всегда ценится

Сердечные приветы

Answer 1

Какую поддержку браузера вам нужно? Уловка с анимацией назад - вам нужно знать оригинальный стиль.

Как только метод, о котором я могу думать, использует метод window.getComputedStyle для извлечения стилей для элемента и их хранения в массиве объектов, который будет использоваться для анимации назад. Вам понадобится пара дополнительных вспомогательных функций.

Я протестировал следующий код в Chrome, IE 9 и FireFox 24, и, похоже, он работал очень хорошо. Все зависит от того, с какими стилями вы работаете. Однако, поскольку вы оживляете, это должно работать с большинством.

Кроме того, я сохранил ваши стили и скорость в переменных, чтобы сделать его более чистым. Fiddle ниже:

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

Fiddle: http://jsfiddle.net/ajqQL/1/

Update: Просто увидел, что в 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; 
    } 
}); 

Fiddle: http://jsfiddle.net/NZq8D/1/