[JS] Wariujaca animacja Opcje

[Maciek316]

Witam mam problem z animacja w moim skrypcie.
Wszystko jest okej dopóki nie zmienie karty w przeglądarce, wtedy gdy wróce to animacja robi co chce, przyspiesza, myli 2 efekty itp.

[PHP] pobierz, plaintext 
	$('.cios, #textDiv1').fadeIn()
				$('#textDiv1').animate({top: '-50px'},600);
				div1.innerHTML = -obrazenia[id];
				        $('#textDiv1, .cios').fadeOut(1000)
						$('#textDiv1').animate({top: '0px'});
[PHP] pobierz, plaintext 

.cios i #textdiv1 odpowiadaja za wyswietlanie obrazka i obrazeń.

Okno odswiezam co 1,5 sekundy:

[PHP] pobierz, plaintext 
	var t=setTimeout('walcz()',1500);
[PHP] pobierz, plaintext 

Moge pokazać caly kod, jesli to pomoze :/

[Comandeer]

To jest problem związany z samym sposobem działania przeglądarki. Jeśli karta jest nieaktywna, to żadne zmiany w DOM nie są wprowadzane, bo nie ma takiej potrzeby. Stąd, gdy wrócisz na tę kartę, trzeba wprowadzić wiele zmian równocześnie. Prawdopodobnie przepisanie kodu na requestAnimationFrame by pomogło

[Maciek316]

No ale to jest dziwne, bo wyzej wymioniona animacja wariuje, a ta:

[PHP] pobierz, plaintext 
$('#przeciwnik').animate({
top: '+='+wartosci[id],
width: '-='+wartosci[id],
}, 700, function() {}
);
[PHP] pobierz, plaintext 

juz tego problemu nie ma.

[Comandeer]

A ta animacja też jest odpalana cyklicznie?

[Maciek316]

tak, to jest w jednym if'ie

[PHP] pobierz, plaintext 
if(kto[id] == 1){
										$('#przeciwnik').animate({
											top: '+='+wartosci[id],
											width: '-='+wartosci[id],
										 }, 700, function() {}
										 );
				$('.cios, #textDiv1').fadeIn()
				$('#textDiv1').animate({top: '-50px'},600);
				div1.innerHTML = -obrazenia[id];
				        $('#textDiv1, .cios').fadeOut(1000)
						$('#textDiv1').animate({top: '0px'});
 
									}
[PHP] pobierz, plaintext 

[Comandeer]

Hm… mój strzał byłby taki, że obliczenia zmian rozmiaru można zsumować i na koniec po prostu wprowadzić jedną zmianę. A pokazywanie i ukrywanie trzeba jednak wykonać tyle razy, ile zostało zaplanowane.

Można próbować w taki sposób coś z tym robić: http://stackoverflow.com/questions/1652986...-on-window-blur

[Maciek316]

no ale jak to sprawdzić, jaki dać warunek?
Problem jest w animacji obrazen, bo cala reszta sie zgadza.

Ten post edytował Maciek316 8.09.2015, 12:11:15

[Comandeer]

Jak strona jest nieaktywna, to nie wywołuj setTimeout i usuń obecną kolejkę animacji przy pomocy clearTimeout. Jak wykryć, że strona jest nieaktywna: http://stackoverflow.com/questions/1060008...rrently-active/

[Maciek316]

tam jest pokazany caly kod, ale jak ja mam z tego stworzyc warunek, pod ktora zmienna jest to stworzone?

Pomoże ktoś? :/

[Comandeer]

Ale z czym dokładnie masz problem?

[Maciek316]

ze stworzeniem warunku, ogolnie js sie dopiero ucze

Dajmy na to pierwszą sytuacje:

[PHP] pobierz, plaintext 
(function($) {
	if (!$.winFocus) {
		$.extend({
			winFocus: function() {
				var init = true, methods = [];
				if (!$(document).data('winFocus')) $(document).data('winFocus', $.winFocus.init());
				for (x in arguments) {
					if (typeof arguments[x] == 'object') {
						if (arguments[x]['blur']) $.winFocus.methods.blur.push(arguments[x].blur);
						if (arguments[x]['focus']) $.winFocus.methods.focus.push(arguments[x].focus);
						if (arguments[x]['blurFocus']) $.winFocus.methods.blurFocus.push(arguments[x].blurFocus);
						if (arguments[x]['initRun']) init = arguments[x].initRun;
					}
					else if (typeof arguments[x] == 'function') methods.push(arguments[x]);
					else if (typeof arguments[x] == 'boolean') {
						init = arguments[x];
					}
				}
				if (methods) {
					if (methods.length == 1) $.winFocus.methods.blurFocus.push(methods[0]);
					else {
						$.winFocus.methods.blur.push(methods[0]);
						$.winFocus.methods.focus.push(methods[1]);
					}
				}
 
				if (init) $.winFocus.methods.onChange();
			}
		});
		$.winFocus.init = function() {
			//	var document.hidden || document.msHidden || document.webkitHidden || document.mozHidden;
 
			// Standards:
			if ($.winFocus.props.hidden in document)	//	IE10 | FF20+
				document.addEventListener('visibilitychange', $.winFocus.methods.onChange);
			else if (($.winFocus.props.hidden = 'mozHidden') in document)	//	Older FF Versions (?)
				document.addEventListener('mozvisibilitychange', $.winFocus.methods.onChange);
			else if (($.winFocus.props.hidden = 'webkitHidden') in document)	//	Chrome
				document.addEventListener('webkitvisibilitychange', $.winFocus.methods.onChange);
			else if (($.winFocus.props.hidden = 'msHidden') in document)	//	IE 4-6
				document.addEventListener('msvisibilitychange', $.winFocus.methods.onChange);
			else if (($.winFocus.props.hidden = 'onfocusin') in document)	//	IE7-9
				document.onfocusin = document.onfocusout = $.winFocus.methods.onChange;
			else	//	All others:
				window.onpageshow = window.onpagehide = window.onfocus = window.onblur = $.winFocus.methods.onChange;
 
			return $.winFocus;
		}
		$.winFocus.methods = {
			blurFocus: [], blur: [], focus: [],
			exeCB: function(e) {
				if ($.winFocus.methods.blurFocus) $.each($.winFocus.methods.blurFocus, function(k, v) { this.apply($.winFocus, [e, !e.hidden]) });
				else if (e.hidden) if ($.winFocus.methods.blur) $.each($.winFocus.methods.blur, function(k, v) { this.apply($.winFocus, [e]) });
				else if ($.winFocus.methods.focus) $.each($.winFocus.methods.focus, function(k, v) { this.apply($.winFocus, [e]) });
			},
			onChange: function(e) {
				var eMap = { focus: false, focusin: false, pageshow: false, blur: true, focusout: true, pagehide: true };
				e = e || window.event;
 
				if (e) {
					e.hidden = e.type in eMap ? eMap[e.type] : document[$.winFocus.props.hidden];
					$(window).data('visible', !e.hidden);
					$.winFocus.methods.exeCB(e);
				}
				else {
					try { $.winFocus.methods.onChange.call(document, new Event('visibilitychange')); }
					catch(err) {  }
				}
			}
		}
		$.winFocus.props = { hidden: 'hidden' }
	}
})(jQuery);
[PHP] pobierz, plaintext 

i daje warunek:

[PHP] pobierz, plaintext 
$.winFocus(function(event, isVisible) {
if(isVisible){
var t=setTimeout('walcz()',1500);
}else
    clearTimeout(t);
 
});
[PHP] pobierz, plaintext 

I wtedy po zmienieniu karty tak jakby sie zamraza, ale potem animacja wariuje, pokazuje po 2 naraza, przyspiesza :/

Ten post edytował Maciek316 10.09.2015, 09:03:06

[Comandeer]

Raczej coś tego typu:

Kod

var t;
$.winFocus(function(event, isVisible) {
if(isVisible){
    t=setTimeout('walcz()',1500);
}else
    clearTimeout(t);

});

W innym wypadku clearTimeout nie ma czego usuwać, bo nie widzi t

[Maciek316]

teraz, gdy zmieniam karte to zatrzymuje, ale animacja mi sie posypala, pokazuje obie naraz i przyspieszają :/

[Comandeer]

http://jsfiddle.net/Comandeer/u4kp1ycd/

[Maciek316]

przerobilem to na swoj kod, ale u mnie dziala na odwrot jak zmienie podstrone to sa animacje, ale jak na niej jestem to sie zamraza... juz nie mam do tego sily