Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Animacja nie działa dobrze
Forum PHP.pl > Forum > XML, AJAX > AJAX
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
  1. <script type="text/javascript">
  2. var $loading = $('<div style="margin-top: 30%; text-align: center; "><img src="images/ajax_loading.gif"> Wczytywanie</div>');
  3.  
  4. // Informacje o hostingu
  5. $(function($){
  6. $(".hi_box_open").click(function(){
  7. $('#aaa').animate({marginTop: '390px'}, 500);
  8. setTimeout(function(){ $('.hi_box').show('drop', 500) }, 500);
  9.  
  10. var file_load = 'includes/hosting_pro.html';
  11. $('.hi_box').html($loading);
  12. $('.hi_box').load(file_load);
  13. return false;
  14. });
  15.  
  16. $(".hi_box_close").click(function(){
  17. $('.hi_box').hide('drop', 500);
  18. setTimeout(function(){ $('#aaa').animate({marginTop: '0px'}, 500) }, 500);
  19. return false;
  20. });
  21. });
  22. </script>


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
mccd
Coś w tym stylu
  1. $(".hi_box_open").click(function(){
  2. $('.hi_box').html($loading);
  3. $('#aaa').stop().animate({marginTop: '390px'}, 500, function(){
  4. $('.hi_box').show('drop', 500);
  5. var file_load = 'includes/hosting_pro.html';
  6. $('.hi_box').load(file_load);
  7. });
  8. return false;
  9. });


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

  1. <script type="text/javascript">
  2. var $loading = $('<div style="margin-top: 30%; text-align: center; "><img src="images/ajax_loading.gif"> Wczytywanie</div>');
  3.  
  4. // Informacje o hostingu
  5. $(function($){
  6. $(".hi_box_open").click(function(){
  7. $('#aaa').stop().animate({marginTop: '390px'}, 500, function(){
  8. $('.hi_box').show('drop', 500);
  9. });
  10.  
  11. var file_load = 'includes/hosting_pro.html';
  12. $('.hi_box').html($loading);
  13. $('.hi_box').load(file_load);
  14. return false;
  15. });
  16.  
  17. $(".hi_box_close").click(function(){
  18. $('#aaa').stop().animate({marginTop: '0px'}, 500, function(){
  19. $('.hi_box').hide('drop', 500);
  20. });
  21. return false;
  22. });
  23. });
  24. </script>


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ę
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.