Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JQ]
Forum PHP.pl > Forum > Przedszkole
Bejkrools
Witajcie, mam problem z animacją wysuwania paneli po obu stronach strony. Wysuwanie i chowanie menu_panel odbywa się bez zastrzeżeń i z animacją toggle-slide ale wysuwanie apps_panel jest już bez animacji slide i dodatkowo kliknięcie apps_transparent_bg nie powoduje schowania się apps_panel . Czy to jakiś błąd w kodzie?


  1. $( document ).ready(function() {
  2. $("#menu-icon").click(function(){
  3. $("#menu_transparent_bg").fadeIn();
  4. $("#menu_panel").toggle( "slide");
  5. });
  6. $("#menu_transparent_bg").click(function(){
  7. $("#menu_transparent_bg").fadeOut();
  8. $("#menu_panel").toggle( "slide");
  9. });
  10. $("#apps-icon").click(function(){
  11. $("#apps_transparent_bg").fadeIn();
  12. $("#apps_panel").toggle( "slide" , "right" );
  13. });
  14. $("#apps_transparent_bg").click(function(){
  15. $("#apps_transparent_bg").fadeOut();
  16. $("#apps_panel").toggle( "slide" , "right");
  17. });
  18. });


  1. <div id='menu-icon'>
  2. <img src="<?PHP echo base_url(); ?>application/images/ic_menu_24px.svg"/>
  3. </div>
  4.  
  5. <div id='apps-icon'>
  6. <img src="<?PHP echo base_url(); ?>application/images/ic_apps_24px.svg"/>
  7. </div>
  8.  
  9. <div id='menu_transparent_bg'>
  10. </div>
  11.  
  12. <div id='apps_transparent_bg'>
  13. </div>
  14.  
  15. <div id='menu_panel'>
  16. </div>
  17.  
  18. <div id='apps_panel'>
  19. </div>


  1. #menu_transparent_bg {
  2. width: 100%;
  3. height: 100%;
  4. top: 0px;
  5. left: 0px;
  6. position: fixed;
  7. z-index: 98;
  8. background-color:rgba(0,0,0,0.4);
  9. display:none;
  10. }
  11. #menu_panel {
  12. top: 0px;
  13. left: 0px;
  14. position: fixed;
  15. background: #EEE;
  16. height: 100%;
  17. width: 300px;
  18. z-index: 99;
  19. display:none;
  20. }
  21. #apps_panel {
  22. top: 0px;
  23. right: 0px;
  24. position: fixed;
  25. background: #EEE;
  26. height: 100%;
  27. width: 500px;
  28. z-index: 99;
  29. display:none;
  30. }
  31. #apps_transparent_bg {
  32. width: 100%;
  33. height: 100%;
  34. top: 0px;
  35. left: 0px;
  36. position: fixed;
  37. z-index: 98;
  38. background-color:rgba(0,0,0,0.4);
  39. display:none;
  40. }

Kshyhoo
Jak poprawnie zadać pytanie
Poproszę PW z propozycją tematu...
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.