Animacja nie działa dobrze, Sprawdź o co mi chodzi Opcje

[aleks365]

Witam

Zrobiłem taki skrypt
Demo
http://fociarnia.3te.pl/projekt/

Zacznij klikać na pozycje "Hosting zdjęć" i "Hosting zdjęć Close" i tak szybko na nie na zmianę i tekst "coś tam dalej" zostaję na górze a tak nie powinno być

Kod js

[PHP] pobierz, plaintext 
<script type="text/javascript">
var $loading = $('<div style="margin-top: 30%; text-align: center; "><img src="images/ajax_loading.gif"> Wczytywanie</div>');
 
// Informacje o hostingu
$(function($){
	$(".hi_box_open").click(function(){
		$('#aaa').animate({marginTop: '390px'}, 500);
		setTimeout(function(){ $('.hi_box').show('drop', 500) }, 500);
 
		var file_load = 'includes/hosting_pro.html';
		$('.hi_box').html($loading);
		$('.hi_box').load(file_load);
		return false;
	});
 
	$(".hi_box_close").click(function(){
		$('.hi_box').hide('drop', 500);
		setTimeout(function(){ $('#aaa').animate({marginTop: '0px'}, 500) }, 500);
		return false;
	});
});
</script>
[PHP] pobierz, plaintext 

Skrypt działa ale jak zacznę klikać w menu na "Hosting zdjęć" i "Hosting zdjęć Close" i zacznę szybko klikać na te dwie pozycje w menu to animacja nie jest dobra bo tekst "coś tam dalej" zostaję na górze a okienko z informacjami jest wysunięte a tak nie powinno być to co mam zrobić żeby skrypt nie robił tak

Ja myślę żeby to zrobić tak że jeśli okienko się wysuwa to w tym czasie przycisk "Hosting zdjęć Close" by nie działał
dopiero po wysunięciu okienka żeby dało go się zamknąć ale problem w tym że nie wiem jak to zrobić

PS: Jeśli jest lepszy sposób niż proponuję to proszę napisać jaki

Ten post edytował aleks365 29.11.2012, 13:37:11

[mccd]

Coś w tym stylu

[PHP] pobierz, plaintext 
	$(".hi_box_open").click(function(){
		$('.hi_box').html($loading);
		$('#aaa').stop().animate({marginTop: '390px'}, 500, function(){
			$('.hi_box').show('drop', 500);
		        var file_load = 'includes/hosting_pro.html';
		        $('.hi_box').load(file_load);
		});
		return false;
	});
[PHP] pobierz, plaintext 

Zamiast settimeOut możesz wywołać po zakończeniu animation + stop() aby nie kolejkowało animacji.

Ten post edytował mccd 29.11.2012, 13:46:23

[aleks365]

Zrobiłem to tak

[PHP] pobierz, plaintext 
<script type="text/javascript">
var $loading = $('<div style="margin-top: 30%; text-align: center; "><img src="images/ajax_loading.gif"> Wczytywanie</div>');
 
// Informacje o hostingu
$(function($){
	$(".hi_box_open").click(function(){
		$('#aaa').stop().animate({marginTop: '390px'}, 500, function(){
			$('.hi_box').show('drop', 500);
		});
 
		var file_load = 'includes/hosting_pro.html';
		$('.hi_box').html($loading);
		$('.hi_box').load(file_load);
		return false;
	});
 
	$(".hi_box_close").click(function(){
		$('#aaa').stop().animate({marginTop: '0px'}, 500, function(){
			$('.hi_box').hide('drop', 500);
		});
		return false;
	});
});
</script>
[PHP] pobierz, plaintext 

ale nie wiem jak z ".hi_box_close" bo chowa się od razu po kliknięciu tekst "coś tam dalej" a chciałem żeby chwilę go przytrzymało i po schowanie okienka tekst poszedł w górę