Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Jquery - podświetlany blok
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
adam882
Witam

Mam taki kod:
  1. $("div#typ_in").mouseover(
  2. function()
  3. {
  4. $("div#wybierz").fadeIn("fast",
  5. function()
  6. {
  7. $("div#wybierz").css('display','inherit');
  8. }
  9. );
  10.  
  11.  
  12. }).mouseout(
  13. function()
  14. {
  15. $("div#wybierz").fadeOut("fast",
  16. function()
  17. {
  18. $("div#wybierz").css('display','none');
  19. });
  20. });

  1. <!-- element o ID wybierz ma domyślnie atrybut "display:none" -->
  2. <div id="typ_in">
  3. <div id="typ"><a href="#">Wybierz typ</a></div>
  4. <div id="wybierz">
  5. <div id="w_blok">
  6. <a href="#">? Oferuję</a>
  7. <a href="#">? Poszukuję</a>
  8. </div>
  9. </div>
  10. </div>
  11. </div>
  12.  

Chcę zrobić tak, aby po najechaniu na "Wybierz typ" pojawiło się okienko "wybierz". Udało mi się to zrobić, ale gdy chciałem dodać efekt "fade" pojawiły się problemy - mianowicie jeżeli zaznaczę kursorem link "Wybierz typ" i odjadę nim, to prawie za każdym razem okienko przy zamykaniu kilka razy "mruga". Co może być źle w kodzie?
zegarek84
identyczny problem choć z inną funkcją:
jquery zapamiętywanie triggerów
adam882
Zrobiłem tak:
[JAVASCRIPT] pobierz, plaintext
  1. var lock = false, lock2 = false;
  2. $("div#typ_in").mouseover(
  3. function()
  4. {
  5. !lock && $("div#wybierz").fadeIn("fast",
  6. function()
  7. {
  8. $("div#wybierz").css('display','inherit');
  9. lock = true;
  10. }
  11.  
  12.  
  13.  
  14. );
  15.  
  16.  
  17. }).mouseout(
  18. function()
  19. {
  20. if(lock){
  21. !lock2 && $("div#wybierz").fadeOut("fast",
  22. function()
  23. {
  24. $("div#wybierz").css('display','none');
  25. });
  26. lock2 = true;
  27. }
  28. });
  29.  
[JAVASCRIPT] pobierz, plaintext

Po najechaniu na link, blok wyświetla się, ale po najechaniu na ten blok - znika. Zaraz potem w ogóle nie chce się wyświetlać.
zegarek84
kod poprawiam ci na "pałę" - nie zamierzam analizować jeśli Tobie nie chce się zrozumieć o co chodzi i niemal skopiować z tamtego tematu ;p
[JAVASCRIPT] pobierz, plaintext
  1. var lock = false, lock2 = false;
  2. $("div#typ_in").mouseover(
  3. function()
  4. {
  5. !lock && $("div#wybierz").fadeIn("fast",
  6. function()
  7. {
  8. $("div#wybierz").css('display','inherit');
  9.  
  10. }
  11. );
  12. lock = true;
  13.  
  14. }).mouseout(
  15. function()
  16. {
  17. if(lock){
  18. !lock2 && $("div#wybierz").fadeOut("fast",
  19. function()
  20. {
  21. $("div#wybierz").css('display','none');
  22. lock=lock2=false;
  23. });
  24.  
  25. }
  26. lock2 = true;
  27. });
  28.  
[JAVASCRIPT] pobierz, plaintext

nie gwarantuję, że zadziała - trochę wcięcia masz kiepskie to może delikatnie w złe miejsca wstawiłem ;p

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-2025 Invision Power Services, Inc.