Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] mouseover, mouseout
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
john_doe
Witam,

proszę o wyrozumiałość - w jquery jestem zielony ale się uczę smile.gif
mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6.  
  7. <head>
  8. <title>j query</title>
  9.  
  10. <style type="text/css">
  11.  
  12. #wrapper
  13. {
  14. widht: 800px;
  15. height: 500px;
  16. border: 1px solid red;
  17. }
  18.  
  19. #wrapper #box
  20. {
  21. width: 100px;
  22. height: 400px;
  23. background: #b02329;
  24. float: left;
  25. }
  26. #wrapper #box1
  27. {
  28. width: 100px;
  29. height: 400px;
  30. background: green;
  31. float: left;
  32.  
  33. }
  34.  
  35. </style>
  36.  
  37. <script type="text/javascript" src="jquery.js"></script>
  38.  
  39. <script type="text/javascript">
  40.  
  41. $(function() {
  42.  
  43.  
  44. $('#box').mouseover(function() {
  45.  
  46. $(this).animate({
  47.  
  48. "width" : "400px"
  49. });
  50.  
  51. });
  52.  
  53. });
  54.  
  55. Witam,
  56.  
  57. proszę o wyrozumiałość - w jquery jestem zielony ale się uczę :)
  58. mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci. Zrobione dla jednego boxa - ale czy nie można by tego lepiej zapisać?
  59. [html]
  60. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  61.  
  62. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  63.  
  64. <html xmlns="http://www.w3.org/1999/xhtml">
  65.  
  66. <head>
  67. <title>j query</title>
  68.  
  69. <style type="text/css">
  70.  
  71. #wrapper
  72. {
  73. widht: 800px;
  74. height: 500px;
  75. border: 1px solid red;
  76. }
  77.  
  78. #wrapper #box
  79. {
  80. width: 100px;
  81. height: 400px;
  82. background: #b02329;
  83. float: left;
  84. }
  85. #wrapper #box1
  86. {
  87. width: 100px;
  88. height: 400px;
  89. background: green;
  90. float: left;
  91.  
  92. }
  93.  
  94. </style>
  95.  
  96. <script type="text/javascript" src="jquery.js"></script>
  97.  
  98. <script type="text/javascript">
  99.  
  100. $(function() {
  101.  
  102.  
  103. $('#box').mouseout(function() {
  104.  
  105. $(this).animate({
  106.  
  107. "width" : "100px"
  108. });
  109.  
  110. });
  111.  
  112. });
  113.  
  114. $(function() {
  115.  
  116.  
  117. $('#box1').mouseover(function() {
  118.  
  119. $(this).animate({
  120.  
  121. "width" : "400px"
  122. });
  123.  
  124. });
  125.  
  126. });
  127.  
  128. </script>
  129.  
  130. </head>
  131.  
  132. <body>
  133.  
  134. <div id="wrapper">
  135. <div id="box"></div>
  136. <div id="box1"></div>
  137. </div>
  138.  
  139.  
  140.  
  141. </body>
  142.  
  143. </html>
erix
Zainteresuj się metodą hover().
vokiel
Może tak:
[JAVASCRIPT] pobierz, plaintext
  1. $('#box1').mouseover(function(){
  2. $(this).animate({
  3. "width" : "400px"
  4. });
  5. }).mouseout(function(){
  6. $(this).animate({
  7. "width" : "100px"
  8. });
  9. });
[JAVASCRIPT] pobierz, plaintext


Lub w jednej funkcji za pomocą .hover()
[JAVASCRIPT] pobierz, plaintext
  1. $('#box1').hover(
  2. function(){
  3. $(this).animate({
  4. "width" : "400px"
  5. });
  6. },
  7. function(){
  8. $(this).animate({
  9. "width" : "100px"
  10. });
  11. }
  12. );
[JAVASCRIPT] pobierz, plaintext
erix
Do takich rzeczy lepiej unikać onmouseover/onmouseout -> przeglądarki potrafią wyzwolić takich zdarzeń kilka w ciągu jednego "najechania", dlatego zalecane jest używanie hover.
vokiel
@erix a o tym jeszcze nie słyszałem, mógłbyś przybliżyć temat jakimś linkiem?
erix
mouseover jest wyzwalane każdorazowo, gdy kursor znajdzie się na dowolnym elemencie wewnątrz. Np. mamy paragraf, w środku spana, to najeżdżając na spana zdarzenie wyzwoli się dwukrotnie.

Za dokumentacją: http://api.jquery.com/mouseover/
Cytat
Show the number of times mouseover and mouseenter events are triggered. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.


Metoda hover jest połączeniem mouseenter i mouseleave. winksmiley.jpg
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.