Использование jQuery, как я могу изменить размер div при прокрутке?

Question

У меня есть div размером 500 пикселей в контейнере высотой 3500 пикселей, и я хочу, чтобы размер 500px div постепенно уменьшался до половины его первоначальной ширины, когда я прокручиваю страницу вниз. Все, что я пробовал с помощью .scroll в jQuery, меняет ширину, как только загружается страница, а не по мере прокрутки страницы.

EDIT Я бы хотел, чтобы ширина масштабировалась вверх и вниз по мере прокрутки страницы вверх и вниз.

Вот пример того, что я начал с того, я знаю, что это, очевидно, не правильно:

$ (документ) .ready (функция() {

$('#box').scroll(function() { 
    $('#box').css('width', '250px'); 
}); 

});

Answer 1

Здесь работает скрипку, которая динамически изменяет его ширина http://jsfiddle.net/CWe9t/1/

$(document).ready(function() { 
    var initialWidth = $("#box").width(); 
    var minWidth = 250; 

    $(document).scroll(function() { 
     var x = initialWidth - (minWidth * ($(window).scrollTop())/$("#box").height()); 
     $('#box').css('width', x); 
    }); 
}); 

Answer 2

Вы вызываете функцию прокрутки на прокрутке вашего окна? Нет, это окно вы вызываете функция прокрутки

$(document).ready(function() { 

$(**window**).scroll(function() { 
    $('#box').css('width', '250px'); 
}); 
}); 

и о медленно уменьшить размер применить этот CSS3 свойства на вашей коробке

#box 
{ 
-webkit-transition: width 0.5s ease-in-out; 
-moz-transition: width 0.5s ease-in-out; 
-o-transition: width 0.5s ease-in-out; 
-ms-transition: width 0.5s ease-in-out; 
transition: width 0.5s ease-in-out; 
} 

применять CSS3 анимацию, как это более гладко анимировать, если много анимации на то же самое страницу в то же время и анимацию JQuery, если это только одна простая анимация, как рассказала @daguru.

Answer 3

$(window).scroll(function() { 
    $("#box").animate({ 
     width: '250px' 
    }, 5000, function() { 
     // Animation complete. 
    }); 
});