.resize() a scrollbar Opcje

[di@blo]

Witam

Mam skrypt który animuje divy w przeglądarce i dopasowuje do przeglądarki. Dla przykładu

[PHP] pobierz, plaintext 
var szer = 'width': (window.innerHeight||document.body.clientHeight)-40;
var wys = (window.innerWidth||document.body.clienWidth)-40,
$('#div').animate({'margin-top': '20px', 'margin-left': '20px', 'width': szer, 'height': wys}, 1000);
[PHP] pobierz, plaintext 

Problem pojiawia się, gdy w trakcie animacji znika scrollbar, bo w chwili zniknięcia zmieniają sie wymiary okna przeglądarki i odpala kod:

[PHP] pobierz, plaintext 
	$(window).bind('resize', function(){ jakas_funckja(); });
[PHP] pobierz, plaintext 

Czy można zmusić funkcję .resize() do ignorowania pojawiania/znikania scrolbarów? Ewentualnie jak inaczej można rozwiązać problem?

Ten post edytował di@blo 5.02.2012, 20:46:48

[Louner]

Możesz blokować swoją funkcję podczas resizeowania okna w ten sposób (przypisujesz do jakiejś zmiennej 'true', gdy strona jest animowana i 'false', gdy animacja się kończy, żeby sprawdzić, czy można wywołać funkcję ze zdarzenia 'resize'):

[HTML] pobierz, plaintext 
<script>
(function () {
    var $document = $(document),
          isAnimating = true,
         documentHeight = $document.height(),
         documentWidth = $document.width();
 
    $('#div')
    .animate({
            twoje_parametry: "animacji",
            height: (documentHeight - 40),
            width: (documentWidth - 40)
        },
        1000,
        function () {
            // animacja zakonczona, tutaj mozesz cos 
            isAnimating = false;
        }
    );
 
    $(window)
    .resize(
        function (evt) {
            // pierwszy sposob, rozpoznawanie wg zmiennej
            if (isAnimating) {
                return;
            }
            if ($("#div").is(":animating")) {
                return;
            }
            jakas_funckja();
        };
    );
}());
</script>
[HTML] pobierz, plaintext 

drugi sposób:

[HTML] pobierz, plaintext 
<script>
(function () {
    var $document = $(document),
        documentHeight = $document.height(),
        documentWidth = $document.width();
 
    $('#div')
    .animate({
            twoje_parametry: "animacji",
            height: (documentHeight - 40),
            width: (documentWidth - 40)
        },
        1000
    );
 
    $(window)
    .resize(
        function (evt) {
            if ($("#div").is(":animating")) {
                return;
            }
            jakas_funckja();
        };
    );
}());
</script>
[HTML] pobierz, plaintext 

Ten post edytował Louner 5.02.2012, 21:31:21